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

最新推荐文章于 2024-07-28 18:23:37 发布
最新推荐文章于 2024-07-28 18:23:37 发布
阅读量1.1k 收藏 3
点赞数
文章标签： vue python html linux java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36538012/article/details/113356028
版权
在使用`npm run build:prod`命令打包Vue项目时，遇到生成的静态文件访问路径错误导致页面空白的问题。通过修改`vue.config.js`中`publicPath`为`./`解决了静态资源路径问题。若页面仍为空白，可能是因为路由模式设置不当，需将`routers.js`中的路由模式从`history`改为`hash`模式，确保页面内容正常显示。
摘要由CSDN通过智能技术生成

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

会出现这样的情况

生成了一个静态的文件夹
打开index.html的时候

会出现页面空白的问题

打开F12查看一下这是为啥

会发现这些文件的路径访问不到

图片.png

解决办法
打开
vue.config.js

找到
publicPath: '/'

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

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

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

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

祈澈菇凉
关注
vue-admin-element路由死循环，页面白屏卡死问题
Zaqenenen的博客
12-25 2800
原理： 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 2443
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踩坑记：1.打包后白屏
mffandxx的博客
01-25 414
在根目录下有一个文件：vue.config.js。 将publicPath: '/'修改为 publicPath: './', 改完后重新打包，就能运行了。
vue admin element动态路由刷新后白屏
bo_gu的博客
11-18 699
vue admin element框架配置动态路由后 点击左边的菜单栏可以正常访问到 但是一刷新页面就变成空白的了 一直苦思不得其解 刚刚终于让我查到了！列表里，不能放在原来静态路由的位置。因为静态路由后面是接动态路由的，404放静态的最后一个会陷入死循环。看来还是要仔细研读源码 要不就会这样 知其然不知其所以然o(╥﹏╥)o。要放在动态路由列表的最后一行也就是。记录一下 困扰了好几天o(╥﹏╥)o。
Vue 项目部署后首页白屏问题排查与解决
最新发布
qq_42072014的博客
07-28 1135
首页白屏问题通常是由资源加载错误、路由配置错误、环境变量配置不当或 Webpack 配置问题引起的。通过仔细检查和调试，大多数问题都可以得到解决。如果你在排查过程中遇到具体的问题，可以尝试搜索相关错误信息，或者参考 Vue.js 官方文档寻求帮助。
【VUE】vue-element-admin在IE中打开空白问题
LuviaWu的博客
03-17 1838
一开始没注意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
在vue3 中使用element运行总是空白，控制台有报错
cxf_L的博客
11-07 1332
在vue3 中使用element运行总是空白，控制台有报错
详解使用vue-admin-template的优化历程
08-27
因此，本文将详细介绍如何对 Vue-Admin-Template 进行优化，提高资源加载速度和打包速度。 优化目的： 1. 加快资源加载速度，减少用户等待的时间和首页白屏时间，提高用户体验。 2. 加快打包速度，不要将时间浪费...
vue-cli4打包过程
m0_64969829的博客
01-13 993
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 1234
疯狂编程学习效果可视化写博客阅读优秀代码心态调整。
vue-admin-element动态路由页面空白
Tom__cy的博客
08-12 3728
本人踩坑日志 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 7610
★:出现白屏问题主要出现于初次布置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 1436
使用 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 9910
#问题一 import "core-js/modules/es6.regexp.constructor"; ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ SyntaxError: Unexpected string at Module._compile (internal/modules/cjs/loader.js:872:18) 解...
解决vue路由跳转未匹配路径时出现空白页的问题
热门推荐
Jeff的博客
11-19 2万+
在进行vue项目开发时，常用vue-router进行路由的导航，这种方式可以很好的进行路由和组件的匹配，但是当用户手动更改为未进行匹配的url时，系统找不到响应的组件进行页面渲染，就会出现空白页面。这种用户体验并不好，下面总结解决该问题的方法。 1.导航守卫 可以使用 router.beforeEach 注册一个全局前置守卫： const router = new VueRouter({ ...
解决vue首屏加载慢，白屏的问题
挥别了青春的博客
09-27 1万+
1.路由懒加载 // 需要ES6支持 const HelloWorld = () => import('@/components/HelloWorld.vue') export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld }, ] }) ...
vue-element-admin：基于vue和element-ui的高效后台框架
"vue-element-admin框架源代码，包含vue-element-admin和vue-admin-template两个项目，预装node_modules，可直接运行" Vue-element-admin是一款基于Vue.js和Element-UI的开源前端框架，专门用于构建企业级中后台...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值