欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue項(xiàng)目中如何通過(guò)cdn引入資源并配置詳解

 更新時(shí)間：2022年06月20日 09:13:37   作者：Jiang_JY  
生產(chǎn)環(huán)境中將項(xiàng)目依賴的一些第三方包替換成通過(guò)cdn方式外部加載,而不是打包到 vender,對(duì)于提升應(yīng)用的加載、響應(yīng)速度很有意義,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中如何通過(guò)cdn引入資源并配置的相關(guān)資料,需要的朋友可以參考下

概念

cdn(內(nèi)容分發(fā)網(wǎng)絡(luò))是一種通過(guò)互聯(lián)網(wǎng)相互連接的電腦網(wǎng)絡(luò)系統(tǒng)，當(dāng)用戶向cdn鏈接請(qǐng)求資源時(shí)，cdn會(huì)利用最靠近用戶的服務(wù)器來(lái)給用戶返回資源。

作用

使用cdn能實(shí)現(xiàn)用戶不需要在項(xiàng)目中通過(guò)npm下載其他資源（如第三方庫(kù)），直接通過(guò)請(qǐng)求cdn服務(wù)器，服務(wù)器返回后即可使用，這樣就減小了打包時(shí)包的大小，項(xiàng)目的首屏加載也能過(guò)更快。

引用資源及配置

話不多說(shuō)，下面對(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以上版本的話沒(méi)有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文件中去除原來(lái)的引用

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)目中通過(guò)cdn來(lái)引入常見的一些資源了。

總結(jié)

到此這篇關(guān)于vue項(xiàng)目中如何通過(guò)cdn引入資源并配置的文章就介紹到這了,更多相關(guān)vue cdn引入資源并配置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論