vue-cli中 assetsPublicPath, assetsSubDirectory的区别
一. webpack配置代码:
1 2 3 4 | index: path.resolve(__dirname, '../dist/index.html' ), assetsRoot: path.resolve(__dirname, '../dist' ), assetsSubDirectory: 'static' , assetsPublicPath: './projectName' // 相对路径 |
上述代码的含义:
assetsRoot
: 在当前目录的上一级 的 dist
目录下输出资源文件
assetsSubDirectory
: 把所有的静态资源打包到 dist
下的 static
文件夹下
assetsPublicPath
:代表生成的index.html
文件,里面引入资源时,路径前面要加上 ./projectName/
,也就是assetsPublicPath的值,即在index.html代码中引用静态文件:
<script type="text/javascript" src="./projectName/static/js/app.js"></script>
如果要是把资源放在https://www.baidu.com/projectName目录下面,可以这样配置
assetsPublicPath: './'
如果使用的是histroy 模式,使用相对路径报错,可以这样配置成绝对路径
assetsPublicPath: '/projectName/'
二.vue部署后白屏问题解决办法
1)如果是hash模式没问题,history模式不行会有刷新白屏问题,需要后端配置下nginx 全覆盖的情况
location / {
try_files $uri $uri/ /index.html;
}
2) history模式下,二级路由刷新报错 us< 这种问题
将webpack.prod.conf.js 文件中的 的publicPath 改成 ‘/’ 绝对路径就可以了
注意: 在hash模式下,一般static和index如果放在根目录下(非特殊情况),直接output: {publicPath: './'},即: publicPath 都带点,assetsPublcPath 也是
在history模式下, 一般static和index如果放在根目录下(非特殊情况),直接output: {publicPath: '/'},即: publicPath 都不带点,assetsPublcPath 也是
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步