Vue-cli打包后部署到子目录下的路径问题说明
默认情况下以当前域名为根目录向下访问。
举例,若需要部署到www.***.com/catalog1/catalog2/下,需要更改
1、config/index.js文件中,build下assetsPublicPath属性为'/catalog1/catalog2/',如下:
build:{
assetsPublicPath:'/catalog1/catalog2/',
默认情况下该值为'/'(该属性目测是webpack打包时的文件引用路径的基础路径)。
2、修改路由base属性为'/catalog1/catalog2/',如下:
exportdefaultnewRouter({ mode:'history', base:'/catalog1/catalog2/', routes:[ { path:'/', name:'indexContent', component:indexContent } ] })
其中mode设置为'history'可清除路径中的#(本地测试有效)。
设置完成后重新打包。
补充知识:vue-cli打包并配合nginx域名二级子目录
可以修改三个配置
1.路由
constroute=newRouter({ 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打包后部署到子目录下的路径问题说明就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持毛票票。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。