vue-element-admin打包后网页空白怎么办？

旧城等待， 2022-11-04 01:38 321阅读 0赞

使用  
npm run build:prod  
命令进行打包

![a597a2d0b5b72d64ae129c1832e448b5.png][]

会出现这样的情况

生成了一个静态的文件夹  
打开index.html的时候  
![ddd2bf499793a53aa6c70f5dd388c83c.png][]

会出现页面空白的问题

打开F12查看一下这是为啥

会发现这些文件的路径访问不到  
![图片.png][.png]

解决办法  
打开  
vue.config.js

找到  
publicPath: ‘/’

将 publicPath: '/'改成 publicPath: ‘./’  
![749008c235430d1396ebc348d13905d4.png][]

然后使用npm run build:prod重新打包

如果这个时候，还是空白的话  
打开浏览器，路径都是正确的，没有报错  
但是就是不显示界面内容

需要打开routers.js文件  
路由模式将histroy改成hash模式，起初 mode:‘history’

![025dbb1e663405536a58f03f192946f7.png][]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70]

[a597a2d0b5b72d64ae129c1832e448b5.png]: /images/20221023/98bed9337b0747e0ae07a23a197ed342.png
[ddd2bf499793a53aa6c70f5dd388c83c.png]: /images/20221023/57e3dfa795564848a704e2aeafd24f91.png
[.png]: /images/20221023/b749e4ddecda436f903088a120d7966e.png
[749008c235430d1396ebc348d13905d4.png]: /images/20221023/4aadc67babc0466da27b8150e925095d.png
[025dbb1e663405536a58f03f192946f7.png]: /images/20221023/8e1c8257810748cca0e26757256ebe4e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70]: /images/20221023/f3dfb78c4e114e599d042ed93170fb48.png

发表评论取消回复

表情：

评论列表（有 0 条评论，321人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue项目打包后在ie浏览器下出现空白页

如果是vue-cli2.0 在webpack.base.conf.js文件里的。

我不是女神ヾ/ 2024年04月24日 21:01/ 0 赞/ 70 阅读

相关 Vue项目打包部署后首页空白的问题

问题描述在进行项目开发的时候，用Vue进行项目框架的搭建并开发，开发完成时需要部署到客户现场，通过命令 npm run build 将项目打包，然后上传至服

た入场券/ 2023年07月01日 10:54/ 0 赞/ 3 阅读

相关解决vue3打包过后空白页面

解决vue3打包过后空白页面在项目根目录下，新建一个vue.config.js文件 module.exports = { // 基本路径

深碍√TFBOYSˉ_/ 2022年11月17日 05:18/ 0 赞/ 541 阅读

相关打包vue文件后页面空白，出现报错

报错如下： Refused to apply style from 'http://127.0.0.1:5500/css/chunk-43aa77e1.33bcbef

r囧r小猫/ 2022年11月15日 11:40/ 0 赞/ 766 阅读

相关 vue-element-admin打包后网页空白怎么办？

使用 npm run build:prod 命令进行打包 ![a597a2d0b5b72d64ae129c1832e448b5.png][] 会出现这样的情况生

旧城等待，/ 2022年11月04日 01:38/ 0 赞/ 322 阅读

相关 vue项目打包后打开空白解决办法

主要就是： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

太过爱你忘了你带给我的痛/ 2022年09月01日 14:49/ 0 赞/ 436 阅读

相关 React-antd 打包后页面空白解决方案

在根目录下打开可以在别的资源目录下打开空白： import { BrowserRouter } from 'react-router' 因为B

雨点打透心脏的1/2处/ 2022年05月19日 00:57/ 0 赞/ 514 阅读

相关 vue-cil3项目打包后浏览器打开空白问题

vue项目目录结构： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9i

比眉伴天荒/ 2021年09月29日 02:48/ 0 赞/ 603 阅读

相关 vue项目打包出现空白

一位大牛写的 vue项目打包终端运行命令 npm run build 点击index.html，通过浏览器运行，出现以下报错，如图： ![70][] 那么应该如何

Myth丶恋晨/ 2021年09月19日 22:32/ 0 赞/ 505 阅读

相关 vue项目打包后打开空白解决办法

网上很多说自己的VUE项目通过Webpack打包生成的list文件，放到HBulider打包后，通过手机打开一片空白。这个主要原因是路径的问题。 1、记得改一下conf

我会带着你远行/ 2021年09月16日 21:52/ 0 赞/ 621 阅读