vue打包后index.html空白、nginx报500错误的解决方案
nginx500错误和vue打包时index空白问题解决方案。
·
看前声明:
以下的所有仅代表本人对于解决问题的记录过程,因为还是小白,望各位前辈不吝赐教,指出错误,严厉批评!!!谢谢!!!
首先我的问题是:vue打包后的dist的index.html空白页,报资源找不到的错
原因:资源打包后的路径问题,导致根据打包后的路径,找不到资源
解决方案:
vue.config.js中加入:
module.exports = {
publicPath: "./", // 可以设置成相对路径,这样所有的资源都会被链接为相对路径,打出来的包可以被部署在任意路径
outputDir: "dist", //打包时生成的生产环境构建文件的目录
assetsDir: 'public', // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
}
其次的nginx方面问题:报500错误
原因:dist文件放入了root文件夹中,nginx无权限访问root文件夹
解决方案:
首先将dist文件移出root文件夹,这里放入var文件夹下。
再修改nginx.conf中关于location root 的配置:
至此问题解决了。
希望上面的方案能帮助到你 :)
参考文章:
更多推荐
已为社区贡献1条内容
所有评论(0)