浅谈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中echarts自动轮播tooltip问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
vue.js+elementUI实现点击左右箭头切换头像功能（类似轮播图效果）
这篇文章主要介绍了vue.js+elementUI实现点击左右箭头切换头像功能（类似轮播图），本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-09-09
vue.config.js中devServer.proxy配置说明及配置正确不生效问题解决
Vue项目devServer.proxy代理配置详解的是一个非常常见的需求,下面这篇文章主要给大家介绍了关于vue.config.js中devServer.proxy配置说明及配置正确不生效问题解决的相关资料,需要的朋友可以参考下2023-02-02
Vue3中的setup是一个新的生命周期函数,它可以用来代替组件中的 data和一些生命周期函数（如created和beforeMount）,这篇文章主要介绍了vue3如何使用setup代替created的相关资料,需要的朋友可以参考下2023-09-09
Vue3+TypeScript封装axios并进行请求调用的实现
这篇文章主要介绍了Vue3+TypeScript封装axios并进行请求调用的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
这篇文章主要介绍了vue双向数据绑定的原理以及知识点总结，并做了代码实例分析，有需要的朋友参考下。2018-04-04
在vue3项目开发中,我们常常会遇到父子组件相互调用的场景,下面主要以setup语法糖格式详细聊聊父子组件那些事儿,并通过代码示例介绍的非常详细,具有一定的参考价值,需要的朋友可以参考下2024-05-05
今天小编就为大家带来一篇vue.js配合$.post从后台获取数据简单demo分享，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要为大家详细介绍了vue+elementUI实现动态面包屑，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
fontawesome的图标有免费版和专业版,本文主要使用free版本,一般free版本的图标够用,free图标又划分为三个图标库,主要有实心图标solid、常规图标regular及品牌图标brand,根据需求去下载对应的图标库,无须全部下载,对vue fontawesome图标库相关知识感兴趣的朋友一起看看吧2023-12-12
最新评论