## 前言
vue cli 打包好的dist目录中的文件, 默认是根目录的, 像这样: lanhaoo.club/index.html
现在想要将文件放到子目录,比如myApps, 想要的效果是这样: lanhaoo.club/myApps/index.html
Vue cli 3版本里的config build 的文件夹都没了
vue-cli 3 的 github 仓库由原有独立的 github 仓库迁移到了 vue 项目下 vue-cli 3 的项目架构完全抛弃了 vue-cli 2 的原有架构,3 的设计更加抽象和简洁(此处后续可以详细介绍) vue-cli 3 是基于 webpack 4 打造,vue-cli 2 还是 webapck 3 vue-cli 3 的设计原则是“0配置” vue-cli 3 提供了 vue ui 命令,提供了可视化配置,更加人性化
vue.config.js module.exports = { configureWebpack: { resolve: { alias: { 'assets': '@/assets', 'components': '@/components', 'views': '@/views', } } }, }
将 vue 界面里的涉及到 assets 的链接都改下 例如:'../assets/xx.png' 改为 '@/assets/xx.png'
在 configureWebpack 上插入官方文档里提供的 publicPath 示例代码(baseUrl已弃用), 一个表达式, 检测是否是生产环境(还不错), 把子文件夹名换成你想要的, 然后重新 build 一遍,上传到对应目录,就OK了,整个 vue.config.js 文件类似下面
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? '/子文件夹名/'
: '/',
configureWebpack: {
resolve: {
alias: {
'assets': '@/assets',
'components': '@/components',
'views': '@/views',
}
}
},
}
参考: https://cli.vuejs.org/zh/config/#publicpath https://segmentfault.com/a/1190000016135314 https://segmentfault.com/a/1190000016101954
相关文章