Vue项目打包后出现白屏的可能原因有很多
1.可能的思路和解决方案：
1. 确认静态资源路径是否正确。
在 Vue 项目中，打包后会生成一个 dist 目录，确保 index.html 引用的资源路径都是相对于 dist 目录的。
2. 确认路由是否正确配置。
如果打包后出现了白屏，可能是因为路由没配置正确。可以检查路由文件是否正确引入、是否正确配置了路由及其子路由等。
3. 确认打包后的 JS 文件是否存在。
在 dist 目录中，确保生成了 main.js 文件。如果没有生成，说明打包过程出现了问题。
4. 确认是否启动了服务器。
如果在本地测试时没有问题，但是打包后出现了白屏，可能是因为本地使用了服务器，但是打包后未启动服务器，需要手动启动服务器。
5. 检查是否使用了 Vue Router history 模式。
如果使用了 Vue Router history 模式，在打包后需要配置服务器，以避免出现404错误。可以选择在服务器上使用路由重定向来解决
2.解决问题的步骤
2.1进行 run build打包
使用
npm run build:prod
命令进行打包
2.2打包结果
会出现这样的情况
生成了一个静态的文件夹
打开index.html的时候
2.3报错信息
会出现页面空白的问题
打开F12查看一下这是为啥
会发现这些文件的路径访问不到
3.在config文件中有一个index.js文件需要配置你的文件路径
解决办法：
***打开 vue.config.js
***找到 publicPath: '/'
***将 publicPath: '/'改成 publicPath: './'
4.重新打包项目
然后使用npm run build:prod重新打包
如果这个时候，还是空白的话
打开浏览器，路径都是正确的，没有报错
但是就是不显示界面内容
5.改改histroy改成hash模式
需要打开routers.js文件
路由模式将histroy改成hash模式，起初 mode:'history'
标签：文件,vue,后白屏,js,Vue,打包,elementAdmin,服务器,路由 From： https://www.cnblogs.com/mahmud/p/17586224.html