【vue】mode:history打包发布后页面空白解决

最新推荐文章于 2024-04-04 11:36:51 发布
最新推荐文章于 2024-04-04 11:36:51 发布
阅读量1.8k 收藏
点赞数
分类专栏： 前端 文章标签： vue
原文链接：https://www.cnblogs.com/yszblog/p/10255458.html
版权

描述： 本地项目正常运行，打包上线之后页面空白，路径之类的都是正确的，目前的解决方法是注释掉mode: ‘history’。（位置在router.js文件中）
参考链接： vue项目的mode:history模式

聪明努力的积极向上
关注
专栏目录
Vue下路由History模式打包后页面空白
sky2714的博客
07-02 6319
vue的路由在默认的hash模式下,默认打包一般不会有什么问题,不过hash模式由于url会带有一个#,不美观,而且在微信分享,授权登录等都会有一些坑.所以history模式也会有一些应用场景.新手往往会碰到history模式打包后页面一片空白的情况,而且没有资源加载错误的报错信息.这个其实仔细研究下会发现,如果项目直接放的跟目录, 那么是没有问题的,如果是子目录,那么就会一片空白了.这个vue官...
VUE 解决mode为history页面为空白的问题
10-16
总结，解决Vue Router `mode: 'history'`导致的页面空白问题，关键在于前端和后端的配合。前端配置`webpack-dev-server`的`historyApiFallback`，而后端配置能捕获所有未知路径并将它们重定向到`index.html`。通过...
vue history模式下，打包后，出现空白页情况
qq_15038747的博客
12-22 1584
修改config/index.js下的build中的assetsPublicPath: '/' 为 assetsPublicPath: './', build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // Paths assetsRoot: path....
vue项目的mode:history模式打包空白
大大黄的博客
04-09 2849
Vue-router 中有hash模式和history模式，vue的路由默认是hash模式，一般开发的单页应用的URL都会带有#号的hash模式，因为整个应用本身而言就只有一个HTML，其他的都是通过router来渲染。简单介绍下两种模式： hash —— 即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）。比如这个 URL：http://www.abc.com/#/hell...
vue history模式打包后页面为空白页
热门推荐
Young_Gao的博客
05-15 1万+
首先先确定是不是路径的问题，如果找不到css文件和js文件，那么要修改config下面的index.js中bulid模块导出的路径assetsPublicPath: '/',改为assetsPublicPath: './',确定路径没问题以后再来看history模式的问题history模式需要服务器端配置详情见：https://router.vuejs.org/zh-cn/essentials/h...
解决Vue history模式下使用嵌套路由打包部署后刷新页面为空白页
weixin_42644340的博客
08-12 1万+
解决Vue history模式下使用嵌套路由打包部署后刷新页面为空白页前言问题分析 前言 总所周知，Vue路由有两种模式，默认hash模式，这种模式下url上会带"#"，因此很多公司开发都不使用hash模式而选用另一种history模式，因为history模式下的url不会带上"#"。不带"#"既是history模式的优势，同时让它带来了一些烦人的问题，比如打包部署页面刷新为空白页，使用嵌套路由刷新为空白页的问题。今天我就分享下我解决嵌套路由刷新的问题。 问题分析 以下是我学习/测试时写的二级路由 当我第
Vue下路由History模式打包后页面空白的解决方法
12-09
vue的路由在默认的hash模式下,默认打包一般不会有什么问题,不过hash模式由于url会带有一个#,不美观,而且在微信分享,授权登录等都会有一些坑.所以history模式也会有一些应用场景.新手往往会碰到history模式打包后页面一片空白的情况,而且没有资源加载错误的报错信息. 这个其实仔细研究下会发现,如果项目直接放的跟目录, 那么是没有问题的,如果是子目录,那么就会一片空白了.这个vue官方有解释,需要加一个base // base: '/history', // mode: 'history', 这个base即为项目路径. 以上两个都解决了,还是会发现,此时只有首页能访问,通
解决vue 打包发布去#和页面空白的问题
10-18
总结来说，解决Vue打包发布时的`#`符号和页面空白问题，主要涉及以下几个步骤： 1. 在Vue Router配置中，将模式设置为`history`并设置正确的`base`。 2. 更新Webpack的`assetsPublicPath`为服务器上的应用路径。 3. ...
路由 mode: "history", 重启项目页面出现空白
weixin_44022064的博客
06-16 350
image.png 页面空白
vue 3.0用history路由打包后出现空白页面
weixin_43867229的博客
05-06 1588
vue 3.0用history路由打包后出现空白页面
vue history模式下出现空白页情况
weixin_30786657的博客
07-30 4204
问题描述： 　 vue搭建的项目，路由一直用的hash模式，所以url中都会带有一个“#”号。现在想要去掉“#”，于是使用history模式 { mode: 'history' }，代码如下： import Vue from 'vue'; import App from './App'; import routers from './router'; impo...
vue的history模式刷新页面空白解决方案
Laputa_的博客
11-18 6667
前言 采坑记录，以便后面翻阅 首先你需要确认页面空白不是由资源文件路径不正确引起的，如果资源找不到就将绝对路径改为相对路劲，具体解决方案看这里：webpack–资源和css中图片引用打包为相对路径的方案 问题现象 在本地开发环境没有任何问题，路由也正常显示，但是打包并部到服务器之后，访问页面就是空白，看控制台也没有报错，当时就是懵逼状态！！ 仔细想一下，history模式下就是在操作html5的h...
vue3路由模式为history，打包后页面空白的处理方式
卫可冬的博客
04-06 7787
场景 vue-router 的 hash 模式时，url始终待着’#‘，如’http://localhost:8080/#/index.html’。 如果要去掉’#'号，那么就需要把 vue-router 的 hash 模式改为 history（html5）模式。 # vue3 const router = createRouter({ //hash 模式 // history: createWebHashHistory(), //html5 模式 history: createWeb
Vue项目打包部署后页面空白，无报错，为什么大公司一定要使用微服务
最新发布
2401_83977357的博客
04-04 628
归根结底是因为打开页面后没有匹配到任何一个路由，也就是设置在router里的路径没有任何一个被匹配到，包括其中设置的path:"/"这个路径，因此也就无法加载对应的组件，所以显示一片空白；官网原文：vue-router默认使用的是hash模式，如果要改成history模式，需要在router中将模式改成history，也就是})
VUE mode为history页面为空白
Zhooson的博客
08-22 2935
当router.js 中mode:history 发现刷新页面 不显示了，原因出来history的请求路径资源不存在了，这个需要后端配置的， 前端 需要修改一个地方即可, devServer: { port: 8000, host: '0.0.0.0', overlay: { e...
【vue项目部署】vue路由在多级页面下，页面刷新空白（history模式下）的排查过程&问题解决
记录
01-03 1803
在项目打包部署后，出现了多级目录刷新后白屏的问题。记录一下排查过程与解决方法。
webpack4深度解析：打包Vue前端多页面项目
"webpack4打包vue前端多页面项目" 在现代前端开发中，Webpack 是一个强大的模块打包工具，常用于处理 JavaScript、CSS 和其他静态资源。本文将深入探讨如何使用 Webpack 4 打包 Vue.js 的多页面项目，这对于理解和...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值