vue-cli 项目优化时报错 Uncaught TypeError: Cannot redefine property: $router

一定要看到最后，第一部分只是单独针对这个问题的，第二部分是具体项目中的做法 

---

1. 单独处理 这个问题

在优化vue-cli项目时，为了减少文件体积，采用cdn的方式加载了第三方的依赖。

vue.config.js中，在发布模式下配置，

//为开发模式  发布模式 分别指定不同的打包入口文件
    chainWebpack: config => {
        // 发布模式 才有必要去配置externals
        config.when(process.env.NODE_ENV === "production", config => {
            config
                .entry('app')
                .clear()
                .add('./src/main-prod.js')

            config.set('externals', {
                vue: 'Vue',
                /* 'vue-router': 'VueRouter', */
                axios: 'axios',
                lodash: '_',
                echarts: 'echarts',
                nprogress: 'NProgress',
                'vue-quill-editor': 'VueQuillEditor'
            })


        })
        config.when(process.env.NODE_ENV === "development", config => {
            config
                .entry('app')
                .clear()
                .add('./src/main-dev.js')
        })
    }

index.html头部引入： 

但是 npm run serve 时会报错，Uncaught TypeError: Cannot redefine property: $router

这是因为重复引入了vue-router, 在vue-cli创建工程时，默认安装了 vue-router，再次从外部导入就会报错。

解决：

可以卸载 npm uninstall vue-router --dev-save

实在不行就，删除 node_modules文件夹，删除package.json中的vue-router依赖，重新执行 npm install

2.在项目中的实际处理方式

这里需要插件的方式进行处理，在config中新增配置，实现 开发模式下不引入CDN资源，发布模式下引入CDN资源

chainWebpack: config => {
        // 发布模式 才有必要去配置externals
        config.when(process.env.NODE_ENV === "production", config => {
            config
                .entry('app')
                .clear()
                .add('./src/main-prod.js')

            config.set('externals', {
                vue: 'Vue',
                'vue-router': 'VueRouter',
                axios: 'axios',
                lodash: '_',
                echarts: 'echarts',
                nprogress: 'NProgress',
                'vue-quill-editor': 'VueQuillEditor',
                TreeTable: 'vue-table-with-tree-grid'
            })
            config.plugin('html').tap(args => {
                args[0].isProd = true
                return args
            })


        })
        config.when(process.env.NODE_ENV === "development", config => {
            config
                .entry('app')
                .clear()
                .add('./src/main-dev.js')
            config.plugin('html').tap(args => {
                args[0].isProd = false
                return args
            })
        })
    }

index.html的完整 head 标签的使用

	
<% if(htmlWebpackPlugin.options.isProd){ %>
    
    
<% } %>