Vue 使用cdn导致vue is not defined 问题

通过cli创建的项目默认会配置cdn对资源进行加载优化，但是在正式部署上线后，有时候会出现cdn访问不到或者被污染的情况，从而导致通过使用cdn加载的资源加载不到从而导致问题。

一、表现：

最终表现为可以访问到index.html文件，但是进不去主页，console中打印vue is not defined（表象）， 以及一些 ERR_CONNECTION_TIMED_OUT 之类的错误（本质），即vue相关资源没有加载到，导致不能进入。

二、解决方法：

不使用cdn。具体做法是在vue.config.js文件中将使用cdn的部分注释掉即可。

如下：

const assetsCDN = {
  // webpack build externals
  externals: {
    // vue: 'Vue',
    // 'vue-router': 'VueRouter',
    // vuex: 'Vuex',
    // axios: 'axios'
  },
  css: [],
  // https://unpkg.com/browse/vue@2.6.10/
  js: [
    // '//cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js',
    // '//cdn.jsdelivr.net/npm/vue-router@3.1.3/dist/vue-router.min.js',
    // '//cdn.jsdelivr.net/npm/vuex@3.1.1/dist/vuex.min.js',
    // '//cdn.jsdelivr.net/npm/axios@0.19.0/dist/axios.min.js'
  ]
}

三、疑问：

1.出现这样这样的情况后，为什么有的浏览器可以访问，有的不行？

这和浏览器本身的缓存有关系，在发现下载的资源存在时，浏览器会优先使用本地资源。但是缓存是有时间的，即使当前可以正常访问的过段时间缓存到期后也会出现这样的问题。

2.为什么开发的时候没有遇到过这样的问题，是如何控制的？

这是和打包机制有关系，当使用cli安装时，相关的库都已经安装到了本地，所以在本地运行时没有必要从cdn中加载。而当打包发布后，用户所有的库都基于网络，而服务器的速度往往受限不及cdn，所以使用cdn可以起到加速加载的作用。

在vue.config.js中，又发现了配置的地方，删除多余的部分，如下：

const vueConfig = {
  configureWebpack: {
    // webpack plugins
    plugins: [
      // Ignore all locale files of moment.js
      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
      new webpack.DefinePlugin({
        APP_VERSION: `"${require('./package.json').version}"`,
        GIT_HASH: JSON.stringify(getGitHash()),
        BUILD_DATE: buildDate
      })
    ],
    // if prod, add externals
    externals: isProd ? assetsCDN.externals : {}
  },

  chainWebpack: config => {
    // if prod is on
    // assets require on cdn
    if (isProd) {
      config.plugin('html').tap(args => {
        args[0].cdn = assetsCDN
        return args
      })
    }
  },
}

可以看到assetsCDN在isProd的条件下进行了配置，这就解释了为何只有在打包才生效。