vue-cli cdn方式怎引入vue模塊？引入vue模塊的經(jīng)驗(yàn)分享！

猿友 2021-06-23 15:32:59 瀏覽數(shù) (5326)

反饋

在有關(guān)于vue的學(xué)習(xí)中我們會(huì)遇到很多的問(wèn)題，今天小編就來(lái)和大家說(shuō)說(shuō)有關(guān)于“vue-cli cdn方式怎引入vue模塊？”這個(gè)問(wèn)題的吧！下面是整理的相關(guān)內(nèi)容，希望對(duì)大家有所幫助。

一、選擇vue的cdn

首先我們引入的vue文件必須是有瀏覽器版本的，至少需要包含vue的運(yùn)行時(shí)的源碼，就是我們說(shuō)的vue.runtime.min.js這個(gè)文件，這個(gè)文件的話大家可以在網(wǎng)上搜索下載。

那么說(shuō)的到這里就有很多人問(wèn)了運(yùn)行時(shí)源碼和完整版有什么不同？

我們?cè)谶\(yùn)行時(shí)源碼缺少編譯器而完整版的卻有編譯器，因?yàn)関ue-loader 編譯后已經(jīng)編譯了?template?，所以就不需要再次編譯，這也就意味著我們運(yùn)行時(shí)源碼還要小，更多的相關(guān)內(nèi)容我們可以在vue官方文檔中查閱！而且我們要是使用bootcdn運(yùn)行時(shí)體積會(huì)更小。

二、從哪里引入？

我們通過(guò)在新建一個(gè)vue-cli3項(xiàng)目，在項(xiàng)目中的?public/index.html?的?head?元素中引入相關(guān)的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>

在代碼中我們?cè)?script?元素中設(shè)置了?crossorigin?屬性，為了避免跨域的警告，更多的相關(guān)內(nèi)容我們可以在CORS settings attributes。而且在這個(gè)項(xiàng)目中?vue?和?vue-router? 都使用 ?cdn ?來(lái)引入了，減少了很多體積。

三、是否需要?jiǎng)h除 import vue語(yǔ)句？

首先對(duì)于這個(gè)問(wèn)題我們是不需要進(jìn)行刪除的，我們只需要在webpack中設(shè)置不打包vue在使用cdn引入模塊就可以了，當(dāng)然如果有小伙伴想要進(jìn)行一個(gè)刪除也是可以的，但是呢一般是不建議，因?yàn)槿绻阍诎惭b我們的項(xiàng)目的時(shí)候使用的是eslint的編輯器的話它是會(huì)直接報(bào)錯(cuò)的，就類似? Vue undefined ?這樣的一些錯(cuò)誤，但是我們是可以用? window.Vue ?來(lái)調(diào)用，但是呢這邊是不建議，因?yàn)槲覀內(nèi)绻@樣的話會(huì)出現(xiàn)丟失語(yǔ)法提醒。如果大家是是安裝了 typescript 那么我們是還要寫(xiě)額外的全局類型等等其他的相關(guān)內(nèi)容，所以小編這邊建議不刪除。

那么就會(huì)有人問(wèn)了，我們要怎么忽略已經(jīng)用cdn引入的模塊在打包的時(shí)候？對(duì)于這個(gè)的話我們可以在vue.config.js文件中添加下面這些代碼：

module.exports = {
  configureWebpack: {
    externals: {
      vue: 'Vue',
      'vue-router': 'VueRouter'
    }
  }
}

在代碼中的屬性名是我們引入的模塊名，值的話是需要替換的變量，這個(gè)值必須和cdn中提供的一樣，這個(gè)作用的話就是使用外部引入的擴(kuò)展，這樣的話我們?cè)赽uild的時(shí)候這個(gè)模塊，我們?cè)诳梢詗ebpack外部拓展中查閱相關(guān)內(nèi)容。

注意：對(duì)于源代碼我們只是改了 “public/index.html”這個(gè)文件和配置了 vue.config.js，沒(méi)有修改其他代碼。

四、打包測(cè)試

我們?cè)诓皇褂?nbsp;cdn 的情況打包的 dist 文件夾（注釋掉 vue.config.js 添加的代碼就可測(cè)試）：

$ 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

而且在這個(gè)文件中的 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

然而這個(gè)時(shí)候 venders 只有24KB，它里面包含的只有 webpack 的相關(guān)代碼了。

總結(jié)：

以上就是有關(guān)于“vue-cli cdn方式怎引入vue模塊？”這個(gè)問(wèn)題的相關(guān)，當(dāng)然如果你有更好的方法也可以和大家一起分享討論，更多的相關(guān)與vue的知識(shí)內(nèi)容我們都可以在W3cschool中學(xué)習(xí)和了解。

相關(guān)資料：

vue官方文檔鏈接：https://cn.vuejs.org/v2/guide/installation.html#%E5%AF%B9%E4%B8%8D%E5%90%8C%E6%9E%84%E5%BB%BA%E7%89%88%E6%9C%AC%E7%9A%84%E8%A7%A3%E9%87%8A

bootcdn鏈接：https://www.bootcdn.cn/

CORS setting attributes 鏈接：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Attributes/crossorigin

webpack外部擴(kuò)展：https://webpack.docschina.org/configuration/externals/#externals

Vue.js

0 人點(diǎn)贊

vue-cli cdn方式怎引入vue模塊？引入vue模塊的經(jīng)驗(yàn)分享！

vue-cli cdn方式怎引入vue模塊？引入vue模塊的經(jīng)驗(yàn)分享！