vue路由器报错

Question

使用vue-router时，经过webpack打包，为什么会出现这个错误Uncaught TypeError: Cannot redefine property: $router

下面是wbpack的配置

难道是webpack配置问题？

Answer 1

结果: 一定是用了两次.

解决: 如果使用资源引用的方式.(index.html使用src -> vue-router.min.js)

两个步骤.

步骤1:

// router.js中,将Vue.use使用判断条件,生产环境不要使用Vue.use(Router)
if (process.env.NODE_ENV === 'development') {
  Vue.use(Router)
}

步骤2:

// webpack.prod.conf.js
    ...
  externals: {
    'vue': 'Vue',
    'vue-router': 'VueRouter'
  }

在webpack的生产环境的配置中加入externals将包作为外部引入.详情自己搜索webpack externals.

Answer 2

你是不是Vue被打包了两次？说你重复定义了$router

Answer 3

有可能是在index.html中引用了vue-router.js的包，所以导致被打包两次