浅谈VUE项目打包后运行页面一片白问题
更新时间：2023年01月13日 08:51:43 作者：小学生波波
本文主要介绍了浅谈VUE项目打包后运行页面一片白问题，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
1、说明
我们用VUE搭建一个脚手架后，在IDEA等工具中开发时，启动都没有什么问题，但是项目开发完成之后，可能需要部署上线，所以需要进行打包操作了，一般都是用下面命令进行打包：
npm run build
打包过程一般没有什么问题，然后就会在工程目录下生成一个【dist]文件夹，里面就是我们打包好的文件，把这些文件部署到Nginx中或者Tomcat中就可以了
2、问题说明
那么我碰到的问题是，Nginx运行之后，访问前端项目时，浏览器中一片空白，没有报任何错误
开始我以为是Nginx的问题，排查了很久，发现不是Nginx的问题，是我打包的问题
3、解决
这是因为在打包的时候，没有修改路径，build默认打包路径是根路径，所以需要修改下面三个文件：
3.1、index.js
config文件下的index.js，按照下图说明进行修改即可：
3.2、utils.js
build文件下的utils.js，按照下图说明进行修改即可：
3.3、webpack.prod.conf.js
build文件下的webpack.prod.conf.js，按照下图说明进行修改即可：
以上三个文件修改完成之后，再重新打包就可以了，部署启动后，登录首页就可以正常访问了
4、总结
我本地的前端VUE项目是这样操作一下就可以正常部署访问了，但可能大家环境各不一样，说不定这样设置后还是不行也有可能，所以我这里只是记录一下我的处理方式，仅供大家参考一下，祝君好运！
到此这篇关于浅谈VUE项目打包后运行页面一片白问题的文章就介绍到这了,更多相关VUE打包运行页面一片白内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue实现超过两行显示展开收起的代码，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了vue3发送验证码倒计时功能的实现(防止连点、封装复用),实现思路是点击发送验证码，验证码倒计时，校验手机号是否正常等一系列操作，本文通过示例代码介绍的非常详细，需要的朋友可以参考下2023-01-01
这篇文章主要介绍了vue限制输入框只能输入8位整数和2位小数，文中我们使用v-model加watch 实现这一个功能,代码简单易懂，需要的朋友可以参考下2019-11-11
下面小编就为大家分享一篇vue中axios解决跨域问题和拦截器的使用方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了vue循环中点击选中再点击取消(单选)的实现，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
解决vue ui报错Couldn‘t parse bundle asset“C:
这篇文章主要介绍了解决vue ui报错Couldn‘t parse bundle asset“C:\Users\Administrator\vue_project1\dist\js\about.js“. Analyzer问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-04-04
这篇文章主要给大家介绍了关于Vue手动埋点设计的相关资料,内容简明扼要并且容易理解,绝对能使你眼前一亮,需要的朋友可以参考下2022-03-03
这篇文章主要介绍了vue iview 导航高亮动态设置方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
Vue-router 中hash模式和history模式的区别
这篇文章主要介绍了Vue-router 中hash模式和history模式的区别，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
vue集成openlayers加载geojson并实现点击弹窗教程
这篇文章主要为大家详细介绍了vue集成openlayers加载geojson并实现点击弹窗教程，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
最新评论