vue項(xiàng)目中如何通過cdn引入資源并配置詳解
概念
cdn(內(nèi)容分發(fā)網(wǎng)絡(luò))是一種通過互聯(lián)網(wǎng)相互連接的電腦網(wǎng)絡(luò)系統(tǒng)，當(dāng)用戶向cdn鏈接請(qǐng)求資源時(shí)，cdn會(huì)利用最靠近用戶的服務(wù)器來給用戶返回資源。
作用
使用cdn能實(shí)現(xiàn)用戶不需要在項(xiàng)目中通過npm下載其他資源（如第三方庫），直接通過請(qǐng)求cdn服務(wù)器，服務(wù)器返回后即可使用，這樣就減小了打包時(shí)包的大小，項(xiàng)目的首屏加載也能過更快。
引用資源及配置
話不多說，下面對(duì)vue項(xiàng)目中常用的資源進(jìn)行cdn引用及配置（vue、vuex、vue-router、axios、elementUI）
1、引入
可在項(xiàng)目中的index.html文件 <head/>標(biāo)簽的<title/>標(biāo)簽的下方添加以下代碼（需要最新版本的話可以上各個(gè)官網(wǎng)上復(fù)制）
<head> ... <title></title> <!--添加以下代碼--> <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js" rel="stylesheet" type="text/javascript"></script> <link rel="stylesheet" > <script src="https://cdn.bootcss.com/element-ui/2.12.0/index.js" rel="stylesheet" type="text/javascript"></script> <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js" rel="stylesheet" type="text/javascript"></script> <script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js" rel="stylesheet" type="text/javascript"></script> <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js" rel="stylesheet" type="text/javascript"></script> <head>
2、配置
在webpack.base.conf.js文件中添加以下配置
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'element-ui': 'ELEMENT',
'vuex': 'Vuex',
'axios': 'axios',
},
如果是vue-cli3以上版本的話沒有webpack.base.conf.js文件的話就在vue.config.js文件中配置：
module.exports ={
...
configureWebpack: {
externals: {
// CDN 的 Element 依賴全局變量 Vue， 所以 Vue 也需要使用 CDN 引入
'vue': 'Vue',
// 屬性名稱 element-ui, 表示遇到 import xxx from 'element-ui' 這類引入 'element-ui'的，
// 不去 node_modules 中找，而是去找 全局變量 ELEMENT
'element-ui': 'ELEMENT',
'axios': 'axios',
'vuex': 'Vuex',
'vue-router': 'VueRouter',
}
},
}
3、在main.js文件中去除原來的引用
main.js:
// import Vue from 'vue' // import router from './router' // import 'element-ui/lib/theme-chalk/index.css'; // import ElementUI from 'element-ui'; // import Vuex from 'vuex' // import axios from 'axios' // Vue.use(Vuex) // Vue.use(ElementUI);
這樣就實(shí)現(xiàn)了在vue項(xiàng)目中通過cdn來引入常見的一些資源了。
總結(jié)
到此這篇關(guān)于vue項(xiàng)目中如何通過cdn引入資源并配置的文章就介紹到這了,更多相關(guān)vue cdn引入資源并配置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
解決vue3中使用echart報(bào)錯(cuò):Cannot read properties of&n
在Vue項(xiàng)目中使用Echarts進(jìn)行數(shù)據(jù)可視化是非常常見的需求,然而有時(shí)候在引入Echarts的過程中可能會(huì)遇到報(bào)錯(cuò),本文主要介紹了解決vue3中使用echart報(bào)錯(cuò):Cannot read properties of undefined (reading ‘type‘),感興趣的可以了解一下2024-01-01
el-table樹形表格表單驗(yàn)證(列表生成序號(hào))
這篇文章主要介紹了el-table樹形表格表單驗(yàn)證(列表生成序號(hào))，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
vue再次進(jìn)入頁面不會(huì)再次調(diào)用接口請(qǐng)求問題
這篇文章主要介紹了vue再次進(jìn)入頁面不會(huì)再次調(diào)用接口請(qǐng)求問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue項(xiàng)目回到頂部的兩種超簡(jiǎn)單實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目回到頂部的兩種超簡(jiǎn)單實(shí)現(xiàn)方法,?頁面切換回到頂部是一個(gè)很常見的功能,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10
這篇文章主要介紹了Vue關(guān)于自定義事件的$event傳參問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
關(guān)于在Vue中import和require的用法分析
在Vue項(xiàng)目中，我們經(jīng)常需要引入外部的模塊或文件，這時(shí)候就會(huì)用到import和require這兩個(gè)關(guān)鍵字，本文將詳細(xì)分析它們的用法，并提供具體的代碼實(shí)例和解釋,需要的朋友可以參考下2023-06-06
Vue3中使用reactive時(shí),后端有返回?cái)?shù)據(jù)但dom沒有更新的解決
這篇文章主要介紹了Vue3中使用reactive時(shí),后端有返回?cái)?shù)據(jù)但dom沒有更新的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
關(guān)于vue屬性使用和不使用冒號(hào)的區(qū)別說明
這篇文章主要介紹了關(guān)于vue屬性使用和不使用冒號(hào)的區(qū)別說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要介紹了Vue項(xiàng)目識(shí)別不到@別名問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
在 Vue.js 中，$router 和 $route 是兩個(gè)常用的對(duì)象，用于處理路由相關(guān)的操作，下面小編就來和大家介紹一下$router 和 $route 的區(qū)別以及如何使用它們吧2023-06-06