VueRouter 使用 mode: ‘history‘ 嵌套路由 打包路径错误的问题

最新推荐文章于 2023-03-01 00:00:51 发布
最新推荐文章于 2023-03-01 00:00:51 发布
阅读量1.2k 收藏 1
点赞数 1
分类专栏： Vue 文章标签： vue.js webpack 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lee576/article/details/121138934
版权

VueRouter 默认是hash模式，但是url上会带上#字符，非常不好看，会影响一些场景下的url解析， history 模式下没有 #，但是history 模式下对打包就出现了路径不对的问题，通过修改 项目根目录下 \build\webpack.prod.conf.js 解决 

  output: {
    publicPath: '/',
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
  },

把 publicPath 由相对路径 './' 改为i绝对路径 '/'

lee576
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
01-21
解决vue-router嵌套路由(子路由)在history模式下刷新无法渲染页面的问题，具体内容如下 一. 异常描述 本来使用的是vue-router的hash模式...vue-router使用history模式+使用嵌套路由： const router = new Router({ m
Vue实现路由跳转和嵌套
08-30
我们可以在 routers.js 中添加 children 属性来实现嵌套路由： ```javascript import Home from './components/home.vue' import First from './components/children/first.vue' import Login from './components/...
vue在history模式下打包部署问题解决
爱学习的大雄的博客
03-01 1815
路由的hash模式与history模式打包时差异如下，hashpublicPath配置为./打包完成后可以直接运行dist包下的index.html且有界面显示部署时直接使用宝塔部署即可，无需配置其它historypublicPath配置为或项目在服务器根下路径打包完成后不可直接运行dist包下的index.html，必须要部署到服务器才行部署时还需要自己去配置nginx，实现服务端的映射。
解决Vue中使用history路由模式出现404的问题
NetRookieX的博客
11-21 8038
背景 vue中默认的路由模式是hash，会出现烦人的符号#，如http://127.0.0.1/#/。 改为history模式可以解决这个问题，但是有一个坑是：强刷新、回退等操作会出现404。 Vue改用History路由模式 修改src/router/index.js export default new Router({ mode: 'history', //改为history模式 routes: [ { path: '/pub', component:Emp
vue 3.0坑 vue-cli版本安装升级问题 添加路由问题 生成环境上路径问题 生成环境空白 代码检测问题代码报错
baidu_39040364的博客
01-10 1058
都有哪些坑 今天用vue 3.0搭建了个小的项目就是这做几个邀请页面 但是一路来坑就不断 首先是vue-cli版本问题 坑后来又是路由调整问题 然后打包完项目放在生产环境上发现访问不了的F12检查后发现js css 访问不到路径问题 和空白显示问题访问不到页面的问题 然后在开发的过程中发现代码检测也是有问题 毫无征兆的你发现你的代码就坏了 罗列 vue-cli版本问题 路由调整问题 生...
vue-router的mode设置为history时 本地页面刷新proxy报错
newBunny的博客
12-04 1078
给proxy代理接口，设一个比较特别的前缀 如api；区分一下前端页面 和 接口的url 方法1： devServer: { disableHostCheck: true, port: 8080, proxy: { // 用以区别vue-router的mode:'history'时 页面链接和接口链接 '/api': { target: url + '/api', changeOrigin: true, ws: false, // 需要websocket 开启 pathRewrite
vue打包后路径失效、找不到、404的问题
csdn_chengpeng的博客
10-09 2648
vue打包路径丢失的问题 在vue项目打包以后，本地打开项目会出现css、js路径404的问题，这是因为vue打包后的路径默认是根路径。 解决方法： 在vue.cofign.js文件中将 publicPath: ‘/’, 更改为 publicPath: ‘./’,（如果没有vue.cofign.js文件，需要自行创建一个） ...
解决vue-router 嵌套路由没反应的问题
10-14
总结，解决Vue Router嵌套路由无响应的问题，关键在于确保每个嵌套的父路由都有一个对应的组件，并且这个组件模板中包含`<router-view>`标签。理解路由的嵌套结构和`<router-view>`的作用对于正确地使用Vue Router至...
解决vue+router路由跳转不起作用的一项原因
11-20
Vue Router是官方推荐的路由库，它允许我们定义动态、嵌套路由，并提供多种导航控制方式。在这个问题中，我们将深入探讨为什么在某些情况下，`vue-router`的路由跳转可能不起作用，以及如何通过设置`mode: 'history'...
Vue-router的使用和出现空白页,路由对象属性详解
10-18
本篇文章将详细讲解 Vue-router 的使用方法，以及如何解决可能出现的空白页问题，并深入探讨路由对象的属性。 首先，Vue-router 的安装与配置通常涉及以下步骤： 1. 安装依赖： ``` npm install vue-router --...
VUE模式改成history后刷新报错问题
热门推荐
小白变怪兽
07-03 1万+
1.在我们进行VUE开发的时候，如果采用默认的路由模式，就是类似于http://xxx.com/#/demo 因为多了一个#影响美观。 2.将路由的模式设置为mode: “history”; 也就是去除地址栏上的#号，类似于：http://xxx.com/demo 但是这样有个问题就是我们直接刷新页面的话，页面会报错，cannot get demo… 下面我们就来记录一下在开发环境下如果我们...
vue 页面跳转404_Vue项目如何开启history模式
weixin_39567013的博客
11-20 281
vue项目里面默认开启的hash模式，开启history模式页面的链接看起来会好一些，开启history需要更改路由里面的模式。1、在router.js里面 添加一个属性：mode: 'history'2、页面跳转不需要修改，如果是新开页签的话需要将#号去掉，比如从列表跳转到详情Window.open('/detail?id=' + item.id)3、config/index.js里面build...
关于connect-history-api-fallback解决vue中mode为history刷新显示报错的解决方案。
weixin_38296003的博客
11-01 2251
首先我后台用的是node.js中的express，项目前端用的vue，并且前端路由vue-router用的是history，这样，在express的静态文件夹设置为dist目录的时候，出现各种404错误，经过查询，发现当路由模式为history的时候，后端会直接请求地址栏中的文件，这样就会出现找不到的情况，需要结合express的connect-history-api-fallback来处理。 1.在服务端下载插件 npm install --save connect-history-api-f.
vue mode: history 链接刷新报错_Vue应用部署到IIS服务器路由为history模式刷新出现404解决方案...
weixin_39948111的博客
12-08 470
背景简介：用vue做微信公众号开发的小伙伴都知道，微信分享和自动登录需要，对于URL中存在'#'的地址，处理起来比较坑！所需参数会被截断丢失，导致签名错误，从而影响到前端开发小哥愉快的调用微信各种api方法。既然我们知道问题在于路由模式，那我们就改用history模式就不会存在这样的问题。但是换成history模式，就会有新的问题，就是页面刷新后，页面就无法显示了(404)，丢囖，有图有真想，如下...
vue mode: history 链接刷新报错_基于prerenderspaplugin的Vue.js预渲染实践
weixin_39955233的博客
12-08 135
作者：-mxin来源：SegmentFault 思否社区插件配置1.路由模式路由模式切换为history模式，去除URL中的#constrouter=newVueRouter({mode:'history',routes:[...]})路由懒加载，配合预渲染更好做到按需加载{path:"/about",name:"About",compon...
Vue router history模式,404报错
zhaochao0037的博客
10-14 931
Vue router history模式,404报错
vue-router mode模式：hash&&history
caoxinjian423的博客
10-06 2366
import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' Vue.use(VueRouter) const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', component: () .
Vue-router——遇到的坑（一）history模式刷新/设置嵌套路由报错（webpack配置）
weixin_43554698的博客
04-29 7040
前端路由都不是真是存在，只需要为前端跳转做一个显示。 hash模式 url中会有#存在，看起来不太舒服且不好做SEO，但是由于路由器向服务器发请求的时候会忽略#后面的值，所以在浏览器刷新的时候都是很正常的不会再次发请求。 -history模式 url就是我们看的正常的路由样子，就是因为看起来很像真的，所以浏览器向服务器请求（也就是刷新）的时候会发现服务器根本没有这个路径资源，所以返回404。 ...
vue 路由history模式刷新页面404问题
lucky_zouzou的博客
10-09 4383
vue项目中路由hash模式改为了history模式,由于hash模式时url带的#号后面是哈希值不会作为url的一部分发送给服务器，而history模式下浏览器会直接去服务器找这些地址，导致服务器没有对应的页面地址而报404。增加location配置，与项目中配置的名称一致，try_files 后面的文件名也要与名称一致。前端项目中修改项目的base路径,这里我设置为main。第二步，修改nginx配置。
vue嵌套路由怎么配置
最新发布
05-21
在 Vue 中嵌套路由的配置步骤如下： 1. 在主路由文件中（通常是 `router/index.js`），导入 `Vue` 和 `VueRouter` 并使用 `Vue.use(VueRouter)` 注册路由插件。 2. 创建路由实例，定义路由规则，并在 `routes` 数组中添加子路由。 3. 在主组件（通常是 `App.vue`）中添加 `<router-view>` 标签，这个标签会根据当前路由匹配到的组件渲染子组件或子路由。 4. 在子路由组件中添加 `<router-view>` 标签以渲染子组件或子路由。 以下是一个简单的示例： ```javascript // router/index.js import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) const routes = [ { path: '/', component: Home, children: [ { path: '', component: Dashboard }, { path: 'profile', component: Profile } ] }, { path: '/about', component: About } ] const router = new VueRouter({ mode: 'history', routes }) export default router ``` ```html <!-- App.vue --> <template> <div id="app"> <router-view></router-view> </div> </template> ``` ```html <!-- Home.vue --> <template> <div> <h1>Home</h1> <router-view></router-view> </div> </template> ``` ```html <!-- Dashboard.vue --> <template> <div> <h2>Dashboard</h2> </div> </template> ``` ```html <!-- Profile.vue --> <template> <div> <h2>Profile</h2> </div> </template> ``` 在这个示例中，访问 `/` 路径会渲染 `Home` 组件，并显示 `Dashboard` 子组件。访问 `/profile` 路径会渲染 `Home` 组件，并显示 `Profile` 子组件。访问 `/about` 路径会渲染 `About` 组件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值