vue history 模式打包部署在域名的二级目录的配置指南


Posted in Javascript onJuly 02, 2019

最近在做项目,需要把项目部署在域名下的二级目录,并且是在用vue-routerhistory 模式。

我们都知道vue-router 的两种前端基本访问模式 hash 和history 。hash 模式后面带#,打包的时候只需要把绝对路径(/)换成相对对路径(./),就可以部署在任何地方,不需要服务器配合,但是不好看,所以我们一般选择history 模式,但是history 模式需要配合服务器的部署。

本文主要是在vue-cli3版本下,对部署在域名的二级目录下做四处的配置:

1. vue-router 路由的文件的配置,根据自己部署的二级目录填写 

export default new VueRouter({
 mode:"history",
  base:"/web",

2.在vue.config.js配置文件(如果没有新建一个,项目根目录下)

 注意: baseUrl 从 Vue CLI 3.3 起已弃用,请使用publicPath。

module.exports = {
publicPath:"/web"
}

3.在入口文件中index.html 的head 标签内加入 

 <meta base ="/web/">

4.最后就是部署配置,以nginx 为例

 

server {
 listen 80;
 server_name localhost;
 root /home/wwwroot/;
 location /web {
  try_files $uri $uri/ /web/index.html;
 }
}

到此,配置和部署已经完成了,将打包好的前端静态资源放在域名指定的根目录下的二级(多级目录配置同上)录即可,

注意,以上配置是针对在history模式,部署在域名下的二级目录以上的 配置,hash 模式 和 history 模式部署在域名根目录不需要那么多配置。

本人测试过部署过,只要按照以上配置四个地方,完全没有问题,但是有不对之处,还请大家指出,谢谢....

总结

以上所述是小编给大家介绍的vue history 模式打包部署在域名的二级目录的配置指南,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
防止页面被iframe(兼容IE,Firefox火狐)
Jul 04 Javascript
js随机生成字母数字组合的字符串 随机动画数字
Sep 02 Javascript
jquery实现的简单二级菜单效果代码
Sep 22 Javascript
jQuery移动web开发中的页面初始化与加载事件
Dec 03 Javascript
jQuery Html控件基本操作(日常收集整理)
Mar 11 Javascript
ES2015 Symbol 一种绝不重复的值
Dec 25 Javascript
实现一个完整的Node.js RESTful API的示例
Sep 29 Javascript
使用vue的transition完成滑动过渡的示例代码
Jun 25 Javascript
vue.js使用v-if实现显示与隐藏功能示例
Jul 06 Javascript
JS中自定义事件的使用与触发操作实例分析
Nov 01 Javascript
nuxt配置通过指定IP和端口访问的实现
Jan 08 Javascript
Vue如何基于vue-i18n实现多国语言兼容
Jul 17 Javascript
简单了解微信小程序的目录结构
Jul 01 #Javascript
vue如何实现自定义底部菜单栏
Jul 01 #Javascript
微信小程序如何利用getCurrentPages进行页面传值
Jul 01 #Javascript
vue中的面包屑导航组件实例代码
Jul 01 #Javascript
Vue动态面包屑功能的实现方法
Jul 01 #Javascript
vue实现自定义H5视频播放器的方法步骤
Jul 01 #Javascript
基于Vue SEO的四种方案(小结)
Jul 01 #Javascript
You might like
域名和cookie问题(域名后缀)
2012/10/10 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
Windows服务器中PHP如何安装redis扩展
2019/09/27 PHP
laravel清除视图缓存的代码
2019/10/23 PHP
thinkphp诸多限制条件下如何getshell详解
2020/12/09 PHP
jQuery 浮动广告实现代码
2008/12/25 Javascript
自己的js工具 Event封装
2009/08/21 Javascript
模拟jQuery ajax服务器端与客户端通信的代码
2011/03/28 Javascript
js转化毫秒为时间格式代码
2014/04/10 Javascript
node+express+ejs制作简单页面上手指南
2014/11/26 Javascript
jQuery复制表单元素附源码分享效果演示
2015/09/30 Javascript
Javascript操作表单实例讲解(下)
2016/06/20 Javascript
js实现动态增加文件域表单功能
2018/10/22 Javascript
vue webpack重写cookie路径的方法
2019/07/10 Javascript
Python的一些用法分享
2012/10/07 Python
python实现sublime3的less编译插件示例
2014/04/27 Python
Python入门篇之字典
2014/10/17 Python
使用django-crontab实现定时任务的示例
2018/02/26 Python
Python中关键字global和nonlocal的区别详解
2018/09/03 Python
在Pandas中DataFrame数据合并,连接(concat,merge,join)的实例
2019/01/29 Python
python学习开发mock接口
2019/04/28 Python
python基于SMTP协议发送邮件
2019/05/31 Python
Python paramiko使用方法代码汇总
2020/11/20 Python
python 实现波浪滤镜特效
2020/12/02 Python
css3的动画特效之动画序列(animation)
2017/12/22 HTML / CSS
毕业生的求职信范文分享
2013/12/04 职场文书
工程业务员工作职责
2013/12/07 职场文书
力学专业求职信
2014/07/23 职场文书
幼儿园八一建军节活动方案
2014/08/27 职场文书
公证处委托书
2015/01/28 职场文书
学校后勤工作总结2015
2015/05/15 职场文书
电影地道战观后感
2015/06/04 职场文书
2016年大学迎新工作总结
2015/10/14 职场文书
2016党校学习心得体会范文
2016/01/07 职场文书