1，項(xiàng)目配置

最近在做一個(gè)項(xiàng)目图呢，項(xiàng)目配置版本如下：

• vue：3.2.6
• vue-router：4.0.11
• vuex：4.0.2
• axios：0.21.4
• element-plus：1.2.0-beta.6
• typescript：4.1.5
• sass：1.26.5

下面分享一下褐桌，如上配置的vue3項(xiàng)目照雁，如何配置cdn加速

悄悄插一句秋泄，element-plus坑真多 T_T

2，CDN介紹

介紹下常見的免費(fèi)cdn網(wǎng)站

2.1寸痢，常見cdn網(wǎng)站

• 國(guó)內(nèi)

  • BootCDN（貓?jiān)疲篽ttps://www.bootcdn.cn/#about
  • Staticfile CDN（七牛云）：http://staticfile.org

• 國(guó)外

  • UNPKG：https://unpkg.com
  • jsDelivr ：https://www.jsdelivr.com

在這里吐槽一下呀洲，BootCDN和Staticfile CDN里面能找到的element-plus最高版本只有1.0.2.beta.71，我暈啼止，人家都出到1.3.0-beta.4了道逗！

2.2，通過UNPKG查找需要的cdn資源

BootCDN和Staticfile CDN簡(jiǎn)單明了的搜索方式就不說了献烦，這里講一下UNPKG搜索cdn資源的方式滓窍。

cdn文件路徑格式：https://unpkg.com/:package@:version/:file

路徑解析如下圖：

url解釋

// element-plus
https://unpkg.com/element-plus@1.2.0-beta.6/dist/index.full.js

// axios
https://unpkg.com/browse/axios@0.21.4/dist/axios.min.js

直接使用資源名后面加/，可以查看文件夾目錄巩那，比如：https://unpkg.com/browse/axios@0.21.4/吏夯，復(fù)制進(jìn)瀏覽器地址欄，可看見如下目錄：

目錄

3东囚，實(shí)戰(zhàn)代碼

按如下配置跺嗽，操作方式基本一樣，文件的cdn版本自行替換页藻。

vue.config.js

const CDN = {
  css: [
    'https://cdn.bootcdn.net/ajax/libs/normalize/8.0.1/normalize.min.css',
    'https://unpkg.com/browse/element-plus@1.2.0-beta.6/theme-chalk/index.css'
  ],
  js: [
    'https://cdn.bootcdn.net/ajax/libs/vue/3.2.6/vue.global.js',
    'https://cdn.bootcdn.net/ajax/libs/vue-router/4.0.11/vue-router.global.js',
    'https://cdn.bootcdn.net/ajax/libs/vuex/4.0.2/vuex.global.js',
    'https://cdn.bootcdn.net/ajax/libs/axios/0.21.4/axios.js',
    'https://unpkg.com/element-plus@1.2.0-beta.6/dist/index.full.js',
    'https://unpkg.com/browse/element-plus@1.2.0-beta.6/lib/locale/lang/zh-cn.js'
  ]
};

let objExternals = {
  vue: 'Vue',
  axios: 'axios',
  vuex: 'Vuex',
  'vue-router': 'VueRouter',
  'element-plus': 'ElementPlus'
}

module.exports = {
  publicPath: '/',
  assetsDir: './assets',
  chainWebpack: config => {
    // 配置桨嫁，將當(dāng)前頁(yè)定義的cdn值傳到主頁(yè)面（index.html）
    config.plugin('html').tap(args => {
    // 這里我是除本地環(huán)境，其余均使用CDN份帐，可自己選擇是否配置
      args[0].cdn = process.env.VUE_APP_STAGE === 'LOCAL' ? {} : CDN
      return args;
    });
  },
  configureWebpack: {
    devServer: {
        //...與本文無關(guān)
    },
    resolve: {
        //...與本文無關(guān)
    },
    plugins: [
        //...與本文無關(guān)
    ],
    // 定義webpack打包配置
    externals: process.env.VUE_APP_STAGE === 'LOCAL' ? {} : objExternals 
  }
}

index.html

在head標(biāo)簽里加上如下：

<% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>
    <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style" />
    <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" />
  <% } %>

在body標(biāo)簽里加上如下：

<% for (let i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
    <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
  <% } %>

main.ts

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
import App from '@/App.vue'
import router from '@/router'
import store from '@/store'

const app = createApp(App)
app.use(router)
app.use(store)
app.use(ElementPlus, { locale: zhCn }) // 配置中文
app.mount('#app')

4璃吧，后記

確實(shí)配了cdn后打包文件小了很多，不過如果cdn掛了废境，你的項(xiàng)目也就掛了畜挨。

如果看了覺得有幫助的，我是@鵬多多11997110103噩凹，歡迎 點(diǎn)贊 關(guān)注 評(píng)論朦促；
END

PS：在本頁(yè)按F12，在console中輸入document.querySelectorAll('._2VdqdF')[0].click()栓始，有驚喜哦

往期文章

• 助你上手Vue3全家桶之Vue3教程
• 助你上手Vue3全家桶之VueX4教程
• 助你上手Vue3全家桶之Vue3教程
• 超詳細(xì)！Vuex手把手教程
• 使用nvm管理node.js版本以及更換npm淘寶鏡像源
• 超詳細(xì)血当！Vue-Router手把手教程
• vue中利用.env文件存儲(chǔ)全局環(huán)境變量幻赚，以及配置vue啟動(dòng)和打包命令
• 微信小程序?qū)崿F(xiàn)搜索關(guān)鍵詞高亮

個(gè)人主頁(yè)

• CSDN
• GitHub
• 簡(jiǎn)書
• 博客園
• 掘金