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 相关文章推荐
基于jQuery实现的百度导航li拖放排列效果,即时更新数据库
Jul 31 Javascript
JavaScript—window对象使用示例
Dec 09 Javascript
jquery实现点击label的同时触发文本框点击事件的方法
Jun 05 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
Oct 12 Javascript
javascript与jquery中的this关键字用法实例分析
Dec 24 Javascript
Bootstrap零基础入门教程(三)
Jul 18 Javascript
JavaScript仿支付宝6位数字密码输入框
Dec 29 Javascript
详谈JavaScript的闭包及应用
Jan 17 Javascript
JS文件中加载jquery.js的实例代码
May 05 jQuery
微信小程序实现基于三元运算验证手机号/姓名功能示例
Jan 19 Javascript
nuxt中使用路由守卫的方法步骤
Jan 27 Javascript
vue-cli3项目打包后自动化部署到服务器的方法
Sep 16 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
Discuz! 5.0.0论坛程序中加入一段js代码,让会员点击下载附件前自动弹出提示窗口
2007/04/18 PHP
JavaScript 类的定义和引用 JavaScript高级培训 自定义对象
2010/04/27 Javascript
js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
2010/05/27 Javascript
jquery lazyload延迟加载技术的实现原理分析
2011/01/24 Javascript
JavaScript 参数中的数组展开 [译]
2012/09/21 Javascript
分享一个我自己写的ToolTip提示插件(附源码)
2013/01/20 Javascript
关于jQuery参考实例 1.0 jQuery的哲学
2013/04/07 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
2014/05/20 Javascript
JS+CSS实现类似QQ好友及黑名单效果的树型菜单
2015/09/22 Javascript
JavaScript实现简单Tip提示框效果
2016/04/20 Javascript
Bootstrap3 多选和单选框(checkbox)
2016/12/29 Javascript
利用ES6语法重构React组件详解
2017/03/02 Javascript
详解puppeteer使用代理
2018/12/27 Javascript
js中console在一行内打印字符串和对象的方法
2019/09/10 Javascript
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
2019/10/10 jQuery
为什么JavaScript中0.1 + 0.2 != 0.3
2020/12/03 Javascript
Python类方法__init__和__del__构造、析构过程分析
2015/03/06 Python
Python编程判断一个正整数是否为素数的方法
2017/04/14 Python
Python使用QRCode模块生成二维码实例详解
2017/06/14 Python
Python编写一个优美的下载器
2018/04/15 Python
Python 生成 -1~1 之间的随机数矩阵方法
2018/08/04 Python
对python 命令的-u参数详解
2018/12/03 Python
Python基础学习之类与实例基本用法与注意事项详解
2019/06/17 Python
python实现身份证实名认证的方法实例
2019/11/08 Python
Python使用type动态创建类操作示例
2020/02/29 Python
Python使用pyexecjs代码案例解析
2020/07/13 Python
希尔顿酒店中国网站:Hilton中国
2017/03/11 全球购物
基督教卡片、励志礼品、家居装饰等:DaySpring
2018/10/12 全球购物
计算机应用毕业生自荐信
2013/10/23 职场文书
学习党课思想汇报
2013/12/29 职场文书
内科护士节演讲稿
2014/09/11 职场文书
店铺转让协议书
2015/01/29 职场文书
2015大学生党员自我评价范文
2015/03/03 职场文书
电影地道战观后感
2015/06/04 职场文书
教师学习心得体会范文
2016/01/21 职场文书
微信小程序中wxs文件的一些妙用分享
2022/02/18 Javascript