Vue-cli@3.0 IE 浏览器路由跳转报错

Mr_Debugger 2019-09-23 02:05:39

前端脚手架用Vue-cli3.0搭建的，其他浏览器都是好的，只要IE不行，本机IE版本IE11,点击登录跳转报错
[vue-router] Failed to resolve async component default: SyntaxError: 语法错误
[vue-router] uncaught error during route navigation:

登录页面可以显示，应该不是兼容的问题吧，路由用的懒加载。知道解决办法的联系我呀，网上的方法试了个遍都不行，QQ:1207688613

...全文

1402 22 打赏收藏转发到动态举报

写回复

用AI写文章

22 条回复

切换为时间正序

请发表友善的回复…

发表回复

Mr_Debugger 2021-05-14

打赏
举报

引用 22 楼许叶子的回复:

[quote=引用 21 楼 Mr_Debugger 的回复:]已自己解决！比如说A路由跳转到B路由，报这个错误，你就把B路由页面的import 删掉，然后一个个引入，看看是哪个错误的如果这个报错了，你就把局部引入放到main.js，变成全局引入

我的是从首页跳详情，找到是哪个组件的问题之后按照你说的方法把问题组件放到main.js里，我的首页都加载不出来了

[/quote] 活学活用哈，可以挨个寻找是哪个引入的东西报错，找出来之后再做其他的操作

许叶子 2021-05-14

打赏
举报

引用 21 楼 Mr_Debugger 的回复:

已自己解决！比如说A路由跳转到B路由，报这个错误，你就把B路由页面的import 删掉，然后一个个引入，看看是哪个错误的如果这个报错了，你就把局部引入放到main.js，变成全局引入

我的是从首页跳详情，找到是哪个组件的问题之后按照你说的方法把问题组件放到main.js里，我的首页都加载不出来了

Mr_Debugger 2020-03-10

打赏
举报

已自己解决！比如说A路由跳转到B路由，报这个错误，你就把B路由页面的import 删掉，然后一个个引入，看看是哪个错误的如果这个报错了，你就把局部引入放到main.js，变成全局引入

NANU-NANA 2019-09-24

打赏
举报

引用 13 楼 Mr_Debugger 的回复:

[quote=引用 12 楼 NANU-NANA 的回复:] 你看错误提示，问题出在babel。在入口文件最上方添加 import '@babel/polyfill' 然后在 public/index.html head 添加： <meta name="renderer" content="webkit|ie-comp|ie-stand">

这些我都试了，不行啊，我之前就觉得是babel问题，在main.js引入import '@babel/polyfill'，后来发现不行。导入下载 babel-polyfill然后引入了import 'babel-polyfill'，结果还是不行。我觉得是不是我搭的脚手架有问题啊？[/quote] 1. babel.config.js

module.exports = {
  // presets: [ '@vue/app' ],
  presets: [
    [
      '@vue/app',
      {
        useBuiltIns: 'entry'
      }
    ]
  ]
}

2. 在入口文件最上方添加 import '@babel/polyfill' 3. index.html： <meta name="renderer" content="webkit|ie-comp|ie-stand"> 4. modern参数： vue-cli-service build --modern

狗蛋丶 2019-09-24

打赏
举报

路由用的懒加载。 http://localhost:7008/#/index 《== Hash 路由，不支持懒加载。 IE的语法错误什么错都看不出来。 IE如果路由死循环会报内存溢出的错误。珍爱生命，远离IE

Mr_Debugger 2019-09-24

打赏
举报

引用 12 楼 NANU-NANA 的回复:

你看错误提示，问题出在babel。在入口文件最上方添加 import '@babel/polyfill' 然后在 public/index.html head 添加： <meta name="renderer" content="webkit|ie-comp|ie-stand">

这些我都试了，不行啊，我之前就觉得是babel问题，在main.js引入import '@babel/polyfill'，后来发现不行。导入下载 babel-polyfill然后引入了import 'babel-polyfill'，结果还是不行。我觉得是不是我搭的脚手架有问题啊？

NANU-NANA 2019-09-24

打赏
举报

引用 18 楼 Mr_Debugger 的回复:

[quote=引用 17 楼 NANU-NANA 的回复:] [quote=引用 16 楼 Mr_Debugger 的回复:] [quote=引用 15 楼 NANU-NANA 的回复:] [quote=引用 13 楼 Mr_Debugger 的回复:] [quote=引用 12 楼 NANU-NANA 的回复:] 你看错误提示，问题出在babel。在入口文件最上方添加 import '@babel/polyfill' 然后在 public/index.html head 添加： <meta name="renderer" content="webkit|ie-comp|ie-stand">

module.exports = {
  // presets: [ '@vue/app' ],
  presets: [
    [
      '@vue/app',
      {
        useBuiltIns: 'entry'
      }
    ]
  ]
}

2. 在入口文件最上方添加 import '@babel/polyfill' 3. index.html： <meta name="renderer" content="webkit|ie-comp|ie-stand"> 4. modern参数： vue-cli-service build --modern [/quote] 能帮我远程看一下吗？帮我看一下是不是脚手架出了问题，万分感谢！QQ：1207688613[/quote] 抱歉。[/quote] 好吧，那我重新去改造一下3.0脚手架吧，真的是神奇，重新搭建一个3.0的吧。移到2.0脚手架就可以了，这个bug简直无敌[/quote] 兼容性的确是个讨厌的问题。

Mr_Debugger 2019-09-24

打赏
举报

引用 17 楼 NANU-NANA 的回复:

[quote=引用 16 楼 Mr_Debugger 的回复:] [quote=引用 15 楼 NANU-NANA 的回复:] [quote=引用 13 楼 Mr_Debugger 的回复:] [quote=引用 12 楼 NANU-NANA 的回复:] 你看错误提示，问题出在babel。在入口文件最上方添加 import '@babel/polyfill' 然后在 public/index.html head 添加： <meta name="renderer" content="webkit|ie-comp|ie-stand">

module.exports = {
  // presets: [ '@vue/app' ],
  presets: [
    [
      '@vue/app',
      {
        useBuiltIns: 'entry'
      }
    ]
  ]
}

NANU-NANA 2019-09-24

打赏
举报

引用 16 楼 Mr_Debugger 的回复:

[quote=引用 15 楼 NANU-NANA 的回复:] [quote=引用 13 楼 Mr_Debugger 的回复:] [quote=引用 12 楼 NANU-NANA 的回复:] 你看错误提示，问题出在babel。在入口文件最上方添加 import '@babel/polyfill' 然后在 public/index.html head 添加： <meta name="renderer" content="webkit|ie-comp|ie-stand">

module.exports = {
  // presets: [ '@vue/app' ],
  presets: [
    [
      '@vue/app',
      {
        useBuiltIns: 'entry'
      }
    ]
  ]
}

Mr_Debugger 2019-09-24

打赏
举报

引用 15 楼 NANU-NANA 的回复:

[quote=引用 13 楼 Mr_Debugger 的回复:] [quote=引用 12 楼 NANU-NANA 的回复:] 你看错误提示，问题出在babel。在入口文件最上方添加 import '@babel/polyfill' 然后在 public/index.html head 添加： <meta name="renderer" content="webkit|ie-comp|ie-stand">

module.exports = {
  // presets: [ '@vue/app' ],
  presets: [
    [
      '@vue/app',
      {
        useBuiltIns: 'entry'
      }
    ]
  ]
}

NANU-NANA 2019-09-23

打赏
举报

你看错误提示，问题出在babel。在入口文件最上方添加 import '@babel/polyfill' 然后在 public/index.html head 添加： <meta name="renderer" content="webkit|ie-comp|ie-stand">

jio可 2019-09-23

打赏
举报

routes里面的参数是index?应该是一个路由的json数据

Mr_Debugger 2019-09-23

打赏
举报

引用 8 楼三岁打酱油的回复:

next()好像不会重载路由那不就不会死循环了。输出一下所有路由看有没有数据，应该是懒加载还没获取路由数据页面就跳转了然后匹配不到路由就空白页了

输出是有数据的，就是index，就是把这个跳转拦截注释掉一样会报错

Mr_Debugger 2019-09-23

打赏
举报

引用 7 楼三岁打酱油的回复:

whiteList.indexOf(to.path) !== -1 如果to.path等于/login就是无限循环进入登录页了这里肯定执行next到login，然后又重新进来执行逻辑无限死循环

这里是没有token的情况，没有token肯定是要进入登陆页的。没有token，而且to.path==login，再怎么跳转都应该是登陆页的，这逻辑没有问题吧？可以登陆成功，登陆接口也能取到token,登录页跳转之后为空白页.http://localhost:7008/#/index，说明路由也跳转了，之前是http://localhost:7008/#/login

jio可 2019-09-23

打赏
举报

next()好像不会重载路由那不就不会死循环了。输出一下所有路由看有没有数据，应该是懒加载还没获取路由数据页面就跳转了然后匹配不到路由就空白页了

jio可 2019-09-23

打赏
举报

whiteList.indexOf(to.path) !== -1 如果to.path等于/login就是无限循环进入登录页了这里肯定执行next到login，然后又重新进来执行逻辑无限死循环

Mr_Debugger 2019-09-23

打赏
举报

引用 5 楼三岁打酱油的回复:

发一下route index代码看看，如果不是这个问题那就是异步加载路由为空的问题。用promise（成功加载路由）再执行路由跳转

我已经把脚手架版本降到2.0了，同样的代码，在2.0下可以使用，这就是最神奇的地方。 {path: '/index', component: () => import('./views/newDashBoard/index'), name: 'NewDashBoard', menuShow: true, iconCls: 'iconfont icon-users',}，跳转前是有一个路由拦截功能

老哥加一下QQ呗，有时间帮我看一下。我一定要知道哪里有问题