vue项目优化----通过externals加载外部CDN资源

 1、vue.config.js中红字部分：

  chainWebpack: config => {
    // 发布模式
    config.when(process.env.NODE_ENV === 'product', config => {
      config
        .entry('app')
        .clear()
        .add('./src/main-prod.js')
      // 通过externals加载外部CDN资源----1
      config.set('externals',{
        vue:'Vue',
        'vue-router':'VueRouter',
        axios:'axios',
        lodash:'_',
        echarts:'echarts',
        nprogress:'NProgress',
        'vue-quill-editor':'quillEditor'
      })
    })
    // 开发模式
    config.when(process.env.NODE_ENV === 'development', config => {
      config
        .entry('app')
        .clear()
        .add('./src/main-dev.js')
    })
  }

2、public/index.html中引入对应的css文件和js文件：

  <!-- 通过externals加载外部CDN资源----2 -->
  <!-- nprogress的样式表文件 -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />
  <!-- 富文本编辑器的演示表文件 -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css">
  <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css">
  <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css">

  <script src="https://cdn.staticfile.org/vue/2.6.11/vue.min.js"></script>
  <script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script>
  <script src="https://cdn.staticfile.org/axios/0.19.2/axios.min.js"></script>
  <script src="https://cdn.staticfile.org/lodash.js/4.17.15/lodash.min.js"></script>
  <script src="https://cdn.staticfile.org/echarts/4.7.0/echarts.min.js"></script>
  <script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>
  <!-- 富文本编辑器的js文件 -->
  <script src="https://cdn.staticfile.org/quill/1.3.4/quill.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.6/dist/vue-quill-editor.js"></script>

标签：vue,process,CDN,externals,js,config,app
来源： https://www.cnblogs.com/wuqilang/p/12792544.html