vue-element-admin打包后白屏的问题

已于 2023-12-29 13:53:40 修改
阅读量574 收藏
点赞数
分类专栏： # vue2.0 文章标签： vue.js 前端 javascript
于 2022-08-02 15:55:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58352785/article/details/126123844
版权

前言

使用

npm run build:prod

  • 命令进行打包

在这里插入图片描述

  • 会出现这样的情况
  • 生成了一个静态的文件夹 打开index.html的时候

在这里插入图片描述

  • 会出现页面空白的问题
  • 打开F12查看一下这是为啥
  • 会发现这些文件的路径访问不到

在这里插入图片描述

  • 解决办法 打开 vue.config.js

  • 找到 publicPath: ‘/’

  • 将 publicPath: '/'改成 publicPath: './'

在这里插入图片描述

  • 然后使用npm run build:prod重新打包 如果这个时候，还是空白的话
  • 打开浏览器，路径都是正确的，没有报错 但是就是不显示界面内容
  • 需要打开routers.js文件 路由模式将histroy改成hash模式，起初 mode:'history'

在这里插入图片描述

热忱1128
关注
专栏目录
vue-admin-element路由死循环，页面白屏卡死问题
Zaqenenen的博客
12-25 2802
原理： permisson.js中，router.beforeEach()做了路由拦截 next() 表示路由成功，直接进入to路由，不会再次调用router.beforeEach() next(‘login’) 表示路由拦截成功，重定向至login，会再次调用router.beforeEach() 也就是说beforeEach()必须调用next(),否则就会出现无限循环， next() 和 next({ …to, replace: true })是不一样的，next({ …to, replace: tr
vue-admin-template打包部署及跳过登录验证
qq_36571947的博客
04-16 2447
1、修改vue.config.js 将publicPath的值改为’./’(设置打包后的静态资源为相对路径,避免加载不到css、js导致页面白屏) outputDir：打包后的文件夹名 assetsDir：打包后的静态资源文件夹名 2、三个文件中的VUE_APP_BASE_API改为自己的请求地址 3、修改登录请求接口 4、注释掉src/main.js中此段代码 不使用mock数据，使用自己的接口数据 5、修改util/request.js中的code判断，改为自己后端返回的code 6、如需跳过
Vue-element-admin打包发布和白屏、proxy跨域等问题
林中明月间丶
03-26 3901
vue.config.js里面 publicPath: './',
Vue 项目部署后首页白屏问题排查与解决
最新发布
qq_42072014的博客
07-28 1161
首页白屏问题通常是由资源加载错误、路由配置错误、环境变量配置不当或 Webpack 配置问题引起的。通过仔细检查和调试，大多数问题都可以得到解决。如果你在排查过程中遇到具体的问题，可以尝试搜索相关错误信息，或者参考 Vue.js 官方文档寻求帮助。
vue-element-admin踩坑记：1.打包后白屏
mffandxx的博客
01-25 416
在根目录下有一个文件：vue.config.js。 将publicPath: '/'修改为 publicPath: './', 改完后重新打包，就能运行了。
vue admin element动态路由刷新后白屏
bo_gu的博客
11-18 703
vue admin element框架配置动态路由后 点击左边的菜单栏可以正常访问到 但是一刷新页面就变成空白的了 一直苦思不得其解 刚刚终于让我查到了！列表里，不能放在原来静态路由的位置。因为静态路由后面是接动态路由的，404放静态的最后一个会陷入死循环。看来还是要仔细研读源码 要不就会这样 知其然不知其所以然o(╥﹏╥)o。要放在动态路由列表的最后一行也就是。记录一下 困扰了好几天o(╥﹏╥)o。
【VUE】vue-element-admin在IE中打开空白问题
LuviaWu的博客
03-17 1849
一开始没注意vue-element-admin这个比较好用的框架没支持IE浏览器，后来公司要求支持IE浏览器，所以查了一下，其实，实现起来很简单！ 附带作者兼容说明链接：https://github.com/PanJiaChen/vue-element-admin/wiki 原话是这样： 由于vue-element-admin项目暂时没有兼容性需求，如有兼容性需求可自行使用babel-polyfill。所以： 1、安装babel-polyfill npm install --save babel-polyf
详解使用vue-admin-template的优化历程
08-27
因此，本文将详细介绍如何对 Vue-Admin-Template 进行优化，提高资源加载速度和打包速度。 优化目的： 1. 加快资源加载速度，减少用户等待的时间和首页白屏时间，提高用户体验。 2. 加快打包速度，不要将时间浪费...
vue-cli4打包过程
m0_64969829的博客
01-13 994
1.在根路径下创建vue.config.js文件 2.vue.config.js文件里需要进行配置 module.exports = { publicPath:'./' , productionSourceMap: false, devServer: { open: false, // 自动启动浏览器 host: '0.0.0.0', // localhost port: 6060, // 端口号 hotOnly: false, // 热更新 overlay:
vue-router添加动态路由及无限刷新白屏和添加不生效问题_router(1)
2301_82244607的博客
04-29 1251
疯狂编程学习效果可视化写博客阅读优秀代码心态调整。
在vue3 中使用element运行总是空白，控制台有报错
cxf_L的博客
11-07 1335
在vue3 中使用element运行总是空白，控制台有报错
vue-admin-element动态路由页面空白
Tom__cy的博客
08-12 3729
本人踩坑日志 1. { path: '*', redirect: '/404', hidden: true }, 在asyncRoutes动态路由最下面加入! ![垃圾blog图片不能显示草-------](https://img-blog.csdnimg.cn/20200812154735945.jpeg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0
Vue部署至服务器步骤以及出现白屏,只有空白主界面和网页标题
qq_53208462的博客
03-22 7613
★:出现白屏问题主要出现于初次布置nginx目录下有默认的50.html和index.html把他们删除之后将dist所有文件拷贝至nginx/html路径下即可 1.npm run build 2.可以通过宝塔Linux面板一键安装nginx(可以搜搜怎么安装宝塔 很简单),之后配置 server { listen 80; //你的服务器端口 server_name 你的服务器地址; location / { root
解决 vue-element-admin在IE中打开空白的问题
sinat_41200024的博客
03-19 6720
vue在兼容IE的时候打开一直显示空白并报错，在IE11中也是打开空白报错，网上看了许多方法都试了也不行，后来发现原来是最后一步的配置错了，咦，桑心的，现在记录一下全过程，供参考： 解决办法如下 ： 1.首先安装babel-polyfill依赖 npm install --save-dev babel-polyfill 2.进入项目入口文件 main.js 导入 import “b...
vue-element-admin打包后网页空白怎么办？
前端视听
03-01 1437
使用 npm run build:prod 命令进行打包 会出现这样的情况 生成了一个静态的文件夹 打开index.html的时候 会出现页面空白的问题 打开F12查看一下这是为啥 会发现这些文件的路径访问不到 解决办法 打开 vue.config.js 找到 publicPath: ‘/’ 将 publicPath: '/'改成 publicPath: ‘./’ 然后使用npm run build:prod重新打包 如果这个时候，还是空白的话 打开浏览器，路径都是正确的，没有报错 但是就是不显
vue+element-项目build打包以后入口文件显示空白的解决方案
红岸基地
06-14 4060
现象描述 我在准备测试一个项目的时候，需要打包给后端使用， 我打完包以后发现，入口文件，也就是这个文件 该文件是直接打不开的，那么我之前是遇到过的，此类的问题，开始是认为是router.js里面的mode改变了导致的，也就是我们在配置路由的时候是可以直接将mode：history的，在路由文件里面，但是我改变以后发现还是不行的，后来百度了以后发现是因为其中有一个文件是不对的，需要我们在配置文件里...
使用vue-element-admin遇到的问题和解决
JSlow
10-27 9913
#问题一 import "core-js/modules/es6.regexp.constructor"; ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ SyntaxError: Unexpected string at Module._compile (internal/modules/cjs/loader.js:872:18) 解...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值