通過cli創(chuàng)建的項目默認會配置cdn對資源進行加載優(yōu)化，但是在正式部署上線后，有時候會出現(xiàn)cdn訪問不到或者被污染的情況，從而導(dǎo)致通過使用cdn加載的資源加載不到從而導(dǎo)致問題。
一灭红、表現(xiàn)：
最終表現(xiàn)為可以訪問到index.html文件，但是進不去主頁口注，console中打印vue is not defined（表象）变擒， 以及一些 ERR_CONNECTION_TIMED_OUT 之類的錯誤（本質(zhì)），即vue相關(guān)資源沒有加載到寝志，導(dǎo)致不能進入娇斑。
二、解決方法：
不使用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)下載的資源存在時芬骄，瀏覽器會優(yōu)先使用本地資源。但是緩存是有時間的鹦聪，即使當前可以正常訪問的過段時間緩存到期后也會出現(xiàn)這樣的問題账阻。
2.為什么開發(fā)的時候沒有遇到過這樣的問題，是如何控制的泽本？
這是和打包機制有關(guān)系淘太，當使用cli安裝時，相關(guān)的庫都已經(jīng)安裝到了本地规丽，所以在本地運行時沒有必要從cdn中加載蒲牧。而當打包發(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的條件下進行了配置巢音，這就解釋了為何只有在打包才生效遵倦。
