cdn

1. The CDN mode is recommended only in the production environment. The DEV environment may cause the vue dev Tool unavailable

   The I. Dev environment can support DevTools with vue.js

   II. Production environment with vue.min.js

2. The version number of files in the CDN must be the same as the version number used in the DEV environment; otherwise, production problems may occur due to different versions.

3. Note to select a reliable CDN (the best solution is OSS + CDN)

Configure the file that requires the CDN

cdn.js

 module.exports = [
    {
        name: 'vue'.library: 'Vue'.js: 'https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js'.css: ' '
    },
    {
        name: 'vue-router'.library: 'VueRouter'.js: 'https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-router.min.js'.css: ' '
    },
    {
        name: 'vuex'.library: 'Vuex'.js: 'https://cdn.jsdelivr.net/npm/[email protected]/dist/vuex.min.js'.css: ' '}]Copy the code

Load in the vue. Config. Js

The basic idea is to change the file in CDn.js to a configuration item for webpack’s externals, where name is the imported package name and library is the global variable.

import Vue from 'vue'  // import [library] from [name]
Copy the code

const cdnDependencies = require('./cdn')
The VUE_APP_CDN option can be added to the configuration file to enable or disable the CDN

const isCDN = process.env.VUE_APP_CDN == 'ON'
const externals = {}
cdnDependencies.forEach(pkg= > {
    externals[pkg.name] = pkg.library
})
const cdn = {
    css: cdnDependencies.map(e= > e.css).filter(e= > e),
    js: cdnDependencies.map(e= > e.js).filter(e= > e)
}

module.exports = {
  configureWebpack: config= > {
    if (isCDN) {
      config.externals = externals
    }
  },
/ / use HTML - webpack - the plugin
  chainWebpack: config= > {
      / / use the CDN
      config.plugin('html').tap(args= > {
        if (isCDN) {
           args[0].cdn = cdn
        }
        return args
      })
 
  }
}
Copy the code

The code to handle

Import [library] from [name] can be removed