看前声明:

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

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

Logo

前往低代码交流专区

更多推荐