溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天小編給大家分享一下怎么用vue-cli cdn方式引入vue模塊的相關知識點，內(nèi)容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。
一、選擇vue的cdn
首先我們引入的vue文件必須是有瀏覽器版本的，至少需要包含vue的運行時的源碼，就是我們說的vue.runtime.min.js這個文件，這個文件的話大家可以在網(wǎng)上搜索下載。
那么說的到這里就有很多人問了運行時源碼和完整版有什么不同？
我們在運行時源碼缺少編譯器而完整版的卻有編譯器，因為vue-loader 編譯后已經(jīng)編譯了template，所以就不需要再次編譯，這也就意味著我們運行時源碼還要小，更多的相關內(nèi)容我們可以在vue官方文檔中查閱！而且我們要是使用bootcdn運行時體積會更小。
二、從哪里引入？
我們通過在新建一個vue-cli3項目，在項目中的public/index.html的head元素中引入相關的cdn，代碼如下：
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title>vue-app</title>
<script
src="https://cdn.bootcss.com/vue/2.6.10/vue.runtime.min.js"
crossorigin="anonymous"
></script>
<script
src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js"
crossorigin="anonymous"
></script>
</head>在代碼中我們在script元素中設置了crossorigin屬性，為了避免跨域的警告，更多的相關內(nèi)容我們可以在CORS settings attributes。而且在這個項目中vue和vue-router 都使用 cdn 來引入了，減少了很多體積。
三、是否需要刪除 import vue語句？
首先對于這個問題我們是不需要進行刪除的，我們只需要在webpack中設置不打包vue在使用cdn引入模塊就可以了，當然如果有小伙伴想要進行一個刪除也是可以的，但是呢一般是不建議，因為如果你在安裝我們的項目的時候使用的是eslint的編輯器的話它是會直接報錯的，就類似 Vue undefined 這樣的一些錯誤，但是我們是可以用 window.Vue 來調(diào)用，但是呢這邊是不建議，因為我們?nèi)绻@樣的話會出現(xiàn)丟失語法提醒。如果大家是是安裝了 typescript 那么我們是還要寫額外的全局類型等等其他的相關內(nèi)容，所以小編這邊建議不刪除。
那么就會有人問了，我們要怎么忽略已經(jīng)用cdn引入的模塊在打包的時候？對于這個的話我們可以在vue.config.js文件中添加下面這些代碼：
module.exports = {
configureWebpack: {
externals: {
vue: 'Vue',
'vue-router': 'VueRouter'
}
}
}在代碼中的屬性名是我們引入的模塊名，值的話是需要替換的變量，這個值必須和cdn中提供的一樣，這個作用的話就是使用外部引入的擴展，這樣的話我們在build的時候這個模塊，我們在可以webpack外部拓展中查閱相關內(nèi)容。
注意：對于源代碼我們只是改了 “public/index.html”這個文件和配置了 vue.config.js，沒有修改其他代碼。
四、打包測試
我們在不使用 cdn 的情況打包的 dist 文件夾（注釋掉 vue.config.js 添加的代碼就可測試）：
$ vue-cli-service build
dist\js\chunk-vendors.c79ff8b4.js 114.63 KiB 40.43 KiB
dist\js\app.dfdf8bae.js 4.71 KiB 2.07 KiB
dist\js\chunk-7a70a114.6f60ed21.js 0.55 KiB 0.37 KiB
dist\css\app.7fe16c18.css 0.49 KiB 0.25 KiB
dist\css\chunk-7a70a114.98f4dffc.css 0.28 KiB 0.17 KiB而且在這個文件中的 venders 有114KB，它是包含了 webpack + vue + vur-router。 使用 cdn 的情況打包的 dist 文件夾：
yarn run v1.17.3
DONE Compiled successfully in 6367ms
File Size Gzipped
dist\js\chunk-vendors.7876bfa1.js 24.21 KiB 8.86 KiB
dist\js\app.7fb99721.js 4.78 KiB 2.10 KiB
dist\js\chunk-7a70a114.759e91f3.js 0.55 KiB 0.38 KiB
dist\css\app.7fe16c18.css 0.49 KiB 0.25 KiB
dist\css\chunk-7a70a114.98f4dffc.css 0.28 KiB 0.17 KiB然而這個時候 venders 只有24KB，它里面包含的只有 webpack 的相關代碼了。
以上就是“怎么用vue-cli cdn方式引入vue模塊”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業(yè)資訊頻道。
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
