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

---

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头部引入： <script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script>

但是 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 标签的使用

<title><%= htmlWebpackPlugin.options.isProd ? '' : 'dev - ' %>后台管理系统</title>
	
<% if(htmlWebpackPlugin.options.isProd){ %>
    <!-- nprogress 的样式表文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />
<% } %>