vue打包后index.html空白、nginx报500错误的解决方案

看前声明:

以下的所有仅代表本人对于解决问题的记录过程，因为还是小白，望各位前辈不吝赐教，指出错误，严厉批评！！！谢谢！！！

首先我的问题是：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 的配置:

        

至此问题解决了。

希望上面的方案能帮助到你 :)

参考文章:

vue-cli3项目打包时，静态资源请求失败 404_Allison-L的博客-CSDN博客

踩坑:nginx代理服务器报500错误_叶叶叶叶大爷的博客-CSDN博客_nginx报500