通過cli創(chuàng)建的項(xiàng)目默認(rèn)會(huì)配置cdn對(duì)資源進(jìn)行加載優(yōu)化，但是在正式部署上線后，有時(shí)候會(huì)出現(xiàn)cdn訪問不到或者被污染的情況，從而導(dǎo)致通過使用cdn加載的資源加載不到從而導(dǎo)致問題。

一、表現(xiàn)：

最終表現(xiàn)為可以訪問到index.html文件，但是進(jìn)不去主頁，console中打印vue is not defined（表象）， 以及一些 ERR_CONNECTION_TIMED_OUT 之類的錯(cuò)誤（本質(zhì)），即vue相關(guān)資源沒有加載到，導(dǎo)致不能進(jìn)入。

二、解決方法：

不使用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.出現(xiàn)這樣這樣的情況后，為什么有的瀏覽器可以訪問，有的不行？

這和瀏覽器本身的緩存有關(guān)系，在發(fā)現(xiàn)下載的資源存在時(shí)，瀏覽器會(huì)優(yōu)先使用本地資源。但是緩存是有時(shí)間的，即使當(dāng)前可以正常訪問的過段時(shí)間緩存到期后也會(huì)出現(xiàn)這樣的問題。

2.為什么開發(fā)的時(shí)候沒有遇到過這樣的問題，是如何控制的？

這是和打包機(jī)制有關(guān)系，當(dāng)使用cli安裝時(shí)，相關(guān)的庫都已經(jīng)安裝到了本地，所以在本地運(yùn)行時(shí)沒有必要從cdn中加載。而當(dāng)打包發(fā)布后，用戶所有的庫都基于網(wǎng)絡(luò)，而服務(wù)器的速度往往受限不及cdn，所以使用cdn可以起到加速加載的作用。

在vue.config.js中，又發(fā)現(xiàn)了配置的地方，刪除多余的部分，如下：

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的條件下進(jìn)行了配置，這就解釋了為何只有在打包才生效。