# Vue项目"Uncaught SyntaxError: Unexpected token <"报错

image-20210621100754434

经排查,发现这是因为router mode改成history后出现的,改回hash mode后没有出现该问题

https://github.com/vuejs/vue-cli/issues/4852

使用history mode后 vue.config.js 中

module.exports = {
  publicPath: './',
  outputDir: 'dist/a',
}
1
2
3
4

其中publicPath 改成 '/'后就正常了。

publicPath默认是/,它会假设应用被部署到一个域名的根目录上,当被部署到一个子路径时,需要修改为:/子路径/。

默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上,例如 https://www.my-app.com/。如果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径。例如,如果你的应用被部署在 https://www.my-app.com/my-app/,则设置 publicPath 为 /my-app/。

# Vue Router报错

# “冗余导航”

通过点击按钮触发router.push时,如果值是同一个,则会报错Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/home/first".

解决方案:

  1. 使用catch https://renatello.com/vuejs-avoided-redundant-navigation/
  2. https://stackoverflow.com/questions/65878999/vue-router-push-error-avoided-redundant-navigation-to-current-location

# name和redirect冲突

{
    name: 'smart-office-index',
    path: '/smart-office',
    redirect: '/base/smart-office/index'
  }
1
2
3
4
5

页面空白,去掉name后就正常

redirect 路由本身不应该再配置 name 否则在某些导航场景下(尤其是按 name 跳转 / 初始化匹配), 会导致 路由解析异常 → 页面空白