vue使用history路由模式后打包空白

最新推荐文章于 2024-07-11 13:01:52 发布
最新推荐文章于 2024-07-11 13:01:52 发布
阅读量1.7k 收藏
点赞数
分类专栏： vue开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/smlljet/article/details/89713837
版权

vue路由默认是hash模式，改成history路由模式可以去掉#,这个除了需要后端服务配合外，config文件修改如下
在这里插入图片描述

Hong Jet
关注
专栏目录
vue history 模式下打包 上传服务器后 空白
匹夫的博客
07-22 571
我们一般解决Vue下的路径中 # 号的问题是 修改vue-router 的模式为history 项目搭建的时候使用了 vue-router export default new Router({ mode: 'history', base: '/dist/', routes: [ { path: '*', name: 'PromotionAgreement', component: PromotionAgreement, }, ..
Vue下路由History模式打包后页面空白
sky2714的博客
07-02 6293
vue的路由在默认的hash模式下,默认打包一般不会有什么问题,不过hash模式由于url会带有一个#,不美观,而且在微信分享,授权登录等都会有一些坑.所以history模式也会有一些应用场景.新手往往会碰到history模式打包后页面一片空白的情况,而且没有资源加载错误的报错信息.这个其实仔细研究下会发现,如果项目直接放的跟目录, 那么是没有问题的,如果是子目录,那么就会一片空白了.这个vue官...
Vue下路由History模式打包后页面空白的解决方法
12-09
vue的路由在默认的hash模式下,默认打包一般不会有什么问题,不过hash模式由于url会带有一个#,不美观,而且在微信分享,授权登录等都会有一些坑.所以history模式也会有一些应用场景.新手往往会碰到history模式打包后页面一片空白的情况,而且没有资源加载错误的报错信息. 这个其实仔细研究下会发现,如果项目直接放的跟目录, 那么是没有问题的,如果是子目录,那么就会一片空白了.这个vue官方有解释,需要加一个base // base: '/history', // mode: 'history', 这个base即为项目路径. 以上两个都解决了,还是会发现,此时只有首页能访问,通
【个人笔记】Vue.js 项目在打包后出现空白页
最新发布
qq_63856835的博客
07-11 407
Vue.js 项目在打包后出现空白页。
VUE - history模式打包后在服务器上页面空白的问题
weixin_44880056的博客
03-15 304
history模式打包后在服务器上页面空白的问题 解决方法 ----- 在base添加 /服务端文件名/
vue2打包后打开网站页面空白
BiangBaing的博客
08-17 2130
众所周知，Vue路由有两种模式，默认hash模式，这种模式下url上会带"#“，因此很多公司开发都不使用hash模式而选用另一种history模式，因为history模式下的url不会带上”#“。不带”#"既是history模式的优点，同时也让它带来了一些烦人的问题，比如打包部署页面刷新为空白页，使用嵌套路由刷新为空白页的问题。今天我就分享下我解决嵌套路由刷新的问题。问题分析以下是我学习/测试时写的二级路由。...
vue路由history模式
liuxuanwei1998的博客
07-12 1025
1
vue项目打包后打开页面空白解决办法
08-27
要解决 Vue 项目打包后打开页面为空白的问题，需要检查 config 文件中的 index.js 文件，确保 build 模块导出的路径正确，并且检查路由配置文件中的模式设置。如果模式设置为 history 模式，需要在服务端添加一个...
处理 vue history模式打包后页面为空白页的问题
qq_21460133的博客
09-07 1126
vue history 模式打包后页面空白页问题记录
vue -- vue-router的history模式打包后页面空白的解决方案
热门推荐
积少成多
07-25 2万+
欢迎访问我的个人博客：http://www.xiaolongwu.cn 前言 采坑记录，以便后面翻阅 首先你需要确认页面空白不是由资源文件路径不正确引起的，如果资源找不到就将绝对路径改为相对路劲，具体解决方案看这里：webpack–资源和css中图片引用打包为相对路径的方案 问题现象 在本地开发环境没有任何问题，路由也正常显示，但是打包并部到服务器之后，访问页面就是空白，看控制台...
vue-cli项目打包后样式空白（或者是样式出现一部分）_vue3 构建后部分样式丢失,重新构建后出现(1)
2401_84433974的博客
05-16 375
什么是MVVM？mvvm和mvc区别？它和其它框架（jquery）的区别是什么？哪些场景适合？组件之间的传值？Vue 双向绑定原理描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？虚拟 DOM 实现原理Vue 中 key 值的作用？Vue 的生命周期Vue 组件间通信有哪些方式?vue 中怎么重置 data?组件中写 name 选项有什么作用？Vue 的 nextTick 的原理是什么？Vuex 有哪几种属性?解决：到config文件夹中打开index.js文件。
vue使用history模式页面空白
qq_29972895的博客
05-12 1340
之前负责了一个项目，使用的是vue。为了避免在地址链接的时候出现问题后端要求去掉#号，也就是使用history模式。 更改history模式后打包部署后发现页面空白。查询了下官网的文档资料https://router.vuejs.org/zh/guide/essentials/history-mode.html#后端配置例子后端需要同步配置才能使用history模式。 但是依旧不可用，查了下由于我是在子目录下的，所以需要在路由配置文件添加一行代码。 ps: 虽然这样解决了问题，但是这样的.
Vue项目打包部署后页面空白，无报错，为什么大公司一定要使用微服务
2401_83977357的博客
04-04 528
归根结底是因为打开页面后没有匹配到任何一个路由，也就是设置在router里的路径没有任何一个被匹配到，包括其中设置的path:"/"这个路径，因此也就无法加载对应的组件，所以显示一片空白；官网原文：vue-router默认使用的是hash模式，如果要改成history模式，需要在router中将模式改成history，也就是})
vue路由及打包部署
m0_61598337的博客
08-20 626
路由表主要记录hash（#号）与组件之间的对应关系。主要定义在router文件夹下的index.js},routes})若path值为/emp，则绑定的是../views/tlias/EmpView.vue，即为一条路由信息。Vue.use(VueRouter)使用vue路由，const routes = [{}]构建路由表，const router = new VueRouter({})实例化路由表对象。
vue项目的mode:history模式打包空白
大大黄的博客
04-09 2834
Vue-router 中有hash模式和history模式，vue的路由默认是hash模式，一般开发的单页应用的URL都会带有#号的hash模式，因为整个应用本身而言就只有一个HTML，其他的都是通过router来渲染。简单介绍下两种模式： hash —— 即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）。比如这个 URL：http://www.abc.com/#/hell...
Vue打包遇到的坑。。。。history和hash模式也会产生区别
CheckMate_Room的博客
09-20 3037
Vue项目再进行打包时，各位小伙伴肯定遇到各种状况，下面我来总结下我所遇到的状况。 1. 打完包之后,请求static文件夹中的文件出现空白页，f12 提示 404。  在config文件夹中打开index.js，更改assetsPublicPath为'./'，个人理解光是"/"代表的是根目录，"./"代表相对路径。 如果你放在服务器上的根目录的话，没有差别；如果放在文件夹内部的时候，"....
vue-cli 打包出来的文件缺少_解决vue-cli脚手架打包后vendor文件过大的问题
weixin_39629989的博客
12-22 623
大家会遇到打包后文件很大，导致页面初始化加载的速度很慢。会出现白屏的现象。这一般是你打包的vendor太大的缘故。如果你打包后看到你的vendor文件有700kb以上。你就要考虑怎么处理。处理这种文件的1、把不常改变的库放到index.html中，通过cdn引入，比如下面这样：然后找到build/webpack.base.conf.js文件，在 module.exports = { } 中添加以下...
vue项目路由模式为history时打包后部署在nginx服务器后，刷新页面空白的问题
u011295864的博客
07-16 4911
放在nginx服务器根目录下的情况： vue.config.js配置： publicPath: '/' router配置： base: '/', mode: 'history' nginx配置文件： location / { try_files $uri $uri/ /index.html; root html; index index.html index.htm; } 放在nginx服务器根目录下一个子目录下的情况（以子目录名称是demo为例）： vue.
vue3 history路由打包空白
05-10
Vue.js 是一种流行的 JavaScript 框架，通过它能开发快速、优化和健壮的单页应用程序。Vue.js 3 是新版的 Vue.js，目前已经发布了 beta 版本，并且有很多新特性让它比以前的版本更强大和更易于使用。 在 Vue.js 3 中，官方提供了一个新的路由器 API，叫做 history 路由，它使用 HTML5 的 history API 来导航单页应用程序。这个 API 使得开发者可以使用 Vue.js 3 与单页应用程序更加深入地交互。 然而，有时候在打包 Vue.js 3 应用程序时可能会遇到 history 路由打包空白的问题。这个问题的出现可能是因为在打包应用程序时，Webpack 没有正确地配置输出路径。具体来说就是，Webpack 没有设置 publicPath 选项。 PublicPath 选项是一个配置选项，它定义了应用程序文件的 URL 前缀，当应用程序被部署到生产环境并使用不同的 URL 时必须使用它。如果没有设置 publicPath，应用程序的资源文件（如 JavaScript 和 CSS 文件）将被查找在相对路径的根目录下，这可能导致路由页面空白。 为了解决这个问题，需要在 webpack 配置文件中设置 publicPath 选项。你可以从 Vue CLI 的内置配置文件中获取到这个选项，也可以在项目中手动设置它。设置 publicPath 选项后，Webpack 将根据 publicPath 的设置来查找文件路径，从而正确地加载资源文件，保证页面可以正确地呈现。 总之，如果在打包 Vue.js 3 应用程序时遇到了 history 路由打包空白的问题，需要检查 publicPath 选项是否正确地设置了。这样可以从根本上解决问题并保证应用程序正常运行。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值