vue項(xiàng)目怎么使用CDN

本文小編為大家詳細(xì)介紹“vue項(xiàng)目怎么使用CDN”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“vue項(xiàng)目怎么使用CDN”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

前言

CDN（內(nèi)容分發(fā)網(wǎng)絡(luò)）指請(qǐng)求資源的方式，即通過(guò)script頭去請(qǐng)求對(duì)應(yīng)的腳本資源的一種方式，項(xiàng)目里配置之后不需要通過(guò)npm包管理工具去下載配置的包。

目的：將引用的外部js、css文件剝離開(kāi)來(lái)，不編譯到vendor.js中，而是用資源的形式引用，這樣瀏覽器可以使用多個(gè)線程異步將vendor.js、外部的js等加載下來(lái)，達(dá)到加速首頁(yè)展示效果。

1. 在vue.config.js進(jìn)行配置

本人對(duì)vue、vuex、vue-router、axios、element-ui、echarts進(jìn)行了cdn引用。（請(qǐng)求element-ui、echarts的cdn較慢）

//生產(chǎn)環(huán)境標(biāo)記
const IS_PRODUCTION = process.env.NODE_ENV === 'production'
//配置引用cdn的js、css地址
const cdn = {
    css: [
        'https://unpkg.com/element-ui@2.13.2/lib/theme-chalk/index.css'
    ],
    js: [
        'https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.min.js',
        'https://cdn.bootcdn.net/ajax/libs/vue-router/3.0.2/vue-router.min.js',
        'https://cdn.bootcdn.net/ajax/libs/vuex/3.1.0/vuex.min.js',
        'https://cdn.bootcdn.net/ajax/libs/axios/0.18.1/axios.min.js',
        'https://unpkg.com/element-ui@2.13.2/lib/index.js',
        'https://cdn.bootcdn.net/ajax/libs/echarts/5.0.1/echarts.min.js'
    ]
}
//配置打包時(shí)使用CDN節(jié)點(diǎn)（加入externals外部擴(kuò)展）， 忽略打包的第三方庫(kù)
//左面放package.json中的擴(kuò)展的名稱(chēng),右面放項(xiàng)目依賴(lài)的名稱(chēng)(項(xiàng)目初始化要用的名稱(chēng))
const externals = {
  // 屬性名稱(chēng) vue, 表示遇到 import xxx from 'vue' 這類(lèi)引入 'vue'的，不去 node_modules 中找，而是去找全局變量 Vue（其他的為VueRouter、Vuex、axios、ELEMENT、echarts，注意全局變量是一個(gè)確定的值，不能修改為其他值，修改為其他大小寫(xiě)或者其他值會(huì)報(bào)錯(cuò)，若有異議可留言）
    vue: 'Vue',
    'vue-router': 'VueRouter',
    vuex: 'Vuex',
    axios: 'axios',
    'element-ui': 'ELEMENT',
    'echarts': 'echarts'
}
chainWebpack(config) {
        if (IS_PRODUCTION) {
            config.plugin('html').tap(args => {
                args[0].cdn = cdn
                return args
            })
            //視為一個(gè)外部庫(kù)，而不將它打包進(jìn)來(lái)
            config.externals(externals)
        }
    }

2.在public/index.html文件配置

使用 webpack中自帶的插件 html插件進(jìn)行配置，在 index.html 中增加判斷，是否使用 CDN， htmlWebpackPlugin.options 使用的是vue.config中的config.plugin('html')的插件屬性。

  <!-- 使用CDN的CSS文件 -->
     <% for (var i in
     htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>
     <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="external nofollow"  rel="external nofollow"  rel="preload" as="style" />
     <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="external nofollow"  rel="external nofollow"  rel="stylesheet" />
   <% } %>
    <!-- 使用CDN加速的JS文件，配置在vue.config.js下 -->
   <% for (var i in
     htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
     <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
   <% } %>

3.易出錯(cuò)點(diǎn) Router is not defined

解決方案： 將Router 改為 ‘VueRouter’Uncaught TypeError: Illegal constructor

解決方案：修改externals 中‘'element-ui’的value

    const externals = {
     'element-ui': 'ELEMENT',
    }

讀到這里，這篇“vue項(xiàng)目怎么使用CDN”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。