具体描述：vue项目，npm run build时点击路由切换，第一次点击没问题，再点不会切换报错如下图

原因分析：vue-router配置路由，当代码分割和懒加载时，由于webpack配置不当，导致懒加载chunk时相对路径出现混乱从而加载chunk失败。-----路径配置如下图

以上路由配置，举例systemManage说明报错点

编译之后，路径分别为

/system/auth

/system/role

/system/menu

/system/group

切换到任何其他目录均报错，无法查看到将要加载的路径

以上可能是 静态资源根路径未指定，相对路径相对于当前url目录导致

解决方法：修改webpack.config.js （自身项目由于将config配置提取出位置稍许有些不同）的静态资源根路径

以上修改后，路径切换正常

【vue】vue-router路径无法正确跳转的更多相关文章

  1. VSCode 在 Vue 导入路径中使用 @ 符号后无法正确跳转 bug

    VSCode 在 Vue 导入路径中使用 @ 符号后无法正确跳转 bug bug jsconfig.json { // This file is required for VSCode to unde ...

  2. vue打包静态资源路径不正确的解决办法

    vue打包静态资源路径不正确的解决办法 vue项目完成打包上线的时候会碰到静态资源找不到的问题,常见的有两个 1.js,css路径不对 解决办法:打开config/index.js,将其中的asset ...

  3. vue 路由视图，router-view嵌套跳转

    实现功能:制作一个登录页面,跳转到首页,首页包含菜单栏.顶部导航栏.主体,标准的后台网页格式.菜单栏点击不同菜单控制主体展示不同的组件(不同的页面). 配置router-view嵌套跳转需要准备两个主 ...

  4. vue 的router的简易运用

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 三、vue之router

    三.vue之router 此时vue的脚手架.创建项目已经完成. ... vue的运行流程 index.html-->main.js-->App.vue-->router/index ...

  6. 四 Vue学习 router学习

    index.js: 按需加载组件: const login = r => require.ensure([], () => r(require('@/page/login')), 'log ...

  7. vue打包后显示空白正确处理方法

    vue打包后显示空白正确处理方法是 1.找到配置文件(js与css加载不上) 修改 这样打包处理可以打开但是页面样式会找不到 2.修改(针对css中的图片加载不上) 找到对应的位置加上publicPa ...

  8. Vue中router两种传参方式

    Vue中router两种传参方式 1.Vue中router使用query传参 相关Html: <!DOCTYPE html> <html lang="en"> ...

  9. vue 中router.go；router.push和router.replace的区别

    vue 中router.go:router.push和router.replace的区别:https://blog.csdn.net/div_ma/article/details/79467165 t ...

随机推荐

  1. phpcms中content主要使用的详情列表关系

    从首页(index.html)中点开的内容网页叫单网页(page.html) 从列表(list.html)中点开的网页叫内容页(show.html) 从导航栏的栏目中下拉的列表栏目叫栏目列表页(cat ...

  2. Spinner的简单使用

    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...

  3. 章节七、1-ArrayList

    一.集合是一个容器,前面讲的数值也是一个容器, 它们的区别是: 1.数组既可以存储基本数据类型,又可以存储引用数据类型,而集合只能存储引用数据类型,也就是对象. 2.基本数据类型存储的是值,引用数据类 ...

  4. PhpStorm和WAMP配置调试参数，问题描述Error. Interpreter is not specified or invalid. Press “Fix” to edit your project configuration.

    PhpStorm和WAMP配置调试参数,解决实际问题. 问题描述: Error. Interpreter is not specified or invalid. Press "Fix&qu ...

  5. 微信小程序中的循环遍历问题

    比如:如果在微信小程序中要遍历输出 0-9 的数,我们会使用for循环 ;i<;i++){ console.log(i); } 确实结果也是这样: 但是,如果我在循环时同时调用wx的api接口1 ...

  6. 如何在HTTP客户端与服务器端之间保持状态（转）

    HTTP协议与状态保持 HTTP协议本身是无状态的,这与HTTP协议本来的目的是相符的,客户端只需要简单的向服务器请求下载某些文件,无论是客户端还是服务器都没有必要纪录彼此过去的行为,每一次请求之间都 ...

  7. mssql sql server ceiling floor 函数用法简介

    摘自: http://www.maomao365.com/?p=5581摘要: 下文主要讲述ceiling.floor函数的功能及举例说明  一.ceiling floor函数功能简介 ceiling ...

  8. CentOS7中安装MySQL5.7

    安装必要的组件 yum install –y autoconf automake imake libxml2-devel expat-devel cmake gcc gcc-c++ libaio li ...

  9. SQL SERVER 查询表的各字段长度

    SELECT a.name,b.name,c.DATA_TYPE,b.max_length FROM sys.tables a join sys.columns b on b.object_id = ...

  10. Android Studio插件GsonFormat

    GsonFormat插件用于在androidStudio 根据json自动生成class的字段和方法,极大提高了开发效率 一.安装GsonFormat插件 二.重启Android Studio,新建一 ...