Vue-cli打包后部署到子目录下的路径问题说明


Posted in Javascript onSeptember 02, 2020

默认情况下以当前域名为根目录向下访问。

举例,若需要部署到www.***.com/catalog1/catalog2/下,需要更改

1、config/index.js文件中,build下assetsPublicPath属性为'/catalog1/catalog2/',如下:

build: {

assetsPublicPath: '/catalog1/catalog2/',

默认情况下该值为'/'(该属性目测是webpack打包时的文件引用路径的基础路径)。

2、修改路由base属性为'/catalog1/catalog2/',如下:

export default new Router({
 mode: 'history',
 base: '/catalog1/catalog2/',
 routes: [
 {
 path: '/',
 name: 'indexContent',
 component: indexContent
 }
 ]
})

其中mode设置为'history'可清除路径中的#(本地测试有效)。

设置完成后重新打包。

补充知识:vue-cli打包并配合nginx域名二级子目录

可以修改三个配置

1.路由

const route = new Router({
mode : 'history',
base: '/admin/',
routes:[]
})

2.打包文件 config/index.js

build设置

assetsPublicPath: '/admin/',

3.nginx配置

try_files $uri $uri/ /admin/index.html;

4.项目目录配置实例

项目路径 web/admin/index.html

以上这篇Vue-cli打包后部署到子目录下的路径问题说明就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 学习 - 提高篇
Feb 02 Javascript
JS简单实现登陆验证附效果图
Nov 19 Javascript
jquery实现公告翻滚效果
Feb 27 Javascript
JS组件中bootstrap multiselect两大组件较量
Jan 26 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
May 25 Javascript
AngularJS应用开发思维之依赖注入3
Aug 19 Javascript
手机软键盘弹出时影响布局的解决方法
Dec 15 Javascript
微信小程序 devtool隐藏的秘密
Jan 21 Javascript
Angularjs根据json文件动态生成路由状态的实现方法
Apr 17 Javascript
浅谈angularjs中响应回车事件
Apr 24 Javascript
node简单实现一个更改头像功能的示例
Dec 29 Javascript
微信小程序时间控件picker view使用详解
Dec 28 Javascript
Jquery $.map使用方法实例详解
Sep 01 #jQuery
JQuery基于FormData异步提交数据文件
Sep 01 #jQuery
vue实现路由懒加载的3种方法示例
Sep 01 #Javascript
JQuery使用数组遍历跳出each循环
Sep 01 #jQuery
vue+echarts实现动态折线图的方法与注意
Sep 01 #Javascript
node.js 如何监视文件变化
Sep 01 #Javascript
JS JQuery获取data-*属性值方法解析
Sep 01 #jQuery
You might like
php 广告调用类代码(支持Flash调用)
2011/08/11 PHP
PHP和Shell实现检查SAMBA与NFS Server是否存在
2015/01/07 PHP
PHP文件上传处理案例分析
2016/10/15 PHP
PHP中使用CURL发送get/post请求上传图片批处理功能
2018/10/15 PHP
?牟┛途W扣了一??效果出?? target=
2007/05/27 Javascript
CSS+Table图文混排中实现文本自适应图片宽度(超简单+跨所有浏览器)
2009/02/14 Javascript
为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能
2009/11/24 Javascript
javascript实现面向对象类的功能书写技巧
2010/03/07 Javascript
js change,propertychange,input事件小议
2011/12/20 Javascript
文件编码导致jquery失效的解决方法
2013/06/26 Javascript
JS模拟自动点击的简单实例
2013/08/08 Javascript
Javascript 浮点运算精度问题分析与解决
2014/03/26 Javascript
Js实现滚动变色的文字效果
2014/06/16 Javascript
整理AngularJS框架使用过程当中的一些性能优化要点
2016/03/05 Javascript
深入理解JS继承和原型链的问题
2016/12/17 Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
2017/01/05 Javascript
vue-router:嵌套路由的使用方法
2017/02/21 Javascript
vue-cli如何快速构建vue项目
2017/04/26 Javascript
基于BootStrap实现简洁注册界面
2017/07/20 Javascript
浅谈React中组件间抽象
2018/01/27 Javascript
初试vue-cli使用HBuilderx打包app的坑
2019/07/17 Javascript
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
2020/04/21 Javascript
jQuery实现朋友圈查看图片
2020/09/11 jQuery
python通过colorama模块在控制台输出彩色文字的方法
2015/03/19 Python
基于python实现的抓取腾讯视频所有电影的爬虫
2016/04/22 Python
通过实例简单了解Python中yield的作用
2019/12/11 Python
new_zeros() pytorch版本的转换方式
2020/02/18 Python
Evisu官方网站:日本牛仔品牌,时尚街头设计风格
2016/12/30 全球购物
美国畅销的跑步机品牌:ProForm
2017/02/06 全球购物
Vans(范斯)德国官网:美国南加州的原创极限运动潮牌
2017/05/02 全球购物
日本最大的药妆连锁店:Matsukiyo松本清药妆店
2017/11/23 全球购物
春节超市活动方案
2014/08/14 职场文书
2014年小学数学教师工作总结
2014/12/03 职场文书
建国大业电影观后感
2015/06/01 职场文书
员工考勤管理制度
2015/08/06 职场文书
浅谈Redis在直播场景的实践方案
2021/04/27 Redis