Vue CLI 構(gòu)建目標(biāo)

當(dāng)你運(yùn)行 vue-cli-service build 時，你可以通過 --target 選項指定不同的構(gòu)建目標(biāo)。它允許你將相同的源代碼根據(jù)不同的用例生成不同的構(gòu)建。

應(yīng)用

應(yīng)用模式是默認(rèn)的模式。在這個模式中：

• index.html 會帶有注入的資源和 resource hint
• 第三方庫會被分到一個獨立包以便更好的緩存
• 小于 4kb 的靜態(tài)資源會被內(nèi)聯(lián)在 JavaScript 中
• public 中的靜態(tài)資源會被復(fù)制到輸出目錄中

庫

關(guān)于 IE 兼容性的提醒

在庫模式中，項目的 publicPath 是根據(jù)主文件的加載路徑動態(tài)設(shè)置的（用以支持動態(tài)的資源加載能力）。但是這個功能用到了 document.currentScript，而 IE 瀏覽器并不支持這一特性。所以如果網(wǎng)站需要支持 IE 的話，建議使用庫之前先在頁面上引入 current-script-polyfill。

注意對 Vue 的依賴

在庫模式中，Vue 是外置的。這意味著包中不會有 Vue，即便你在代碼中導(dǎo)入了 Vue。如果這個庫會通過一個打包器使用，它將嘗試通過打包器以依賴的方式加載 Vue；否則就會回退到一個全局的 Vue 變量。

要避免此行為，可以在build命令中添加--inline-vue標(biāo)志。

vue-cli-service build --target lib --inline-vue

你可以通過下面的命令將一個單獨的入口構(gòu)建為一個庫：

vue-cli-service build --target lib --name myLib [entry]

File                     Size                     Gzipped

dist/myLib.umd.min.js    13.28 kb                 8.42 kb
dist/myLib.umd.js        20.95 kb                 10.22 kb
dist/myLib.common.js     20.57 kb                 10.09 kb
dist/myLib.css           0.33 kb                  0.23 kb

這個入口可以是一個 .js 或一個 .vue 文件。如果沒有指定入口，則會使用 src/App.vue。

構(gòu)建一個庫會輸出：

• dist/myLib.common.js：一個給打包器用的 CommonJS 包 (不幸的是，webpack 目前還并沒有支持 ES modules 輸出格式的包)
• dist/myLib.umd.js：一個直接給瀏覽器或 AMD loader 使用的 UMD 包
• dist/myLib.umd.min.js：壓縮后的 UMD 構(gòu)建版本
• dist/myLib.css：提取出來的 CSS 文件 (可以通過在 vue.config.js 中設(shè)置 css: { extract: false } 強(qiáng)制內(nèi)聯(lián))

警告

如果你在開發(fā)一個庫或多項目倉庫 (monorepo)，請注意導(dǎo)入 CSS 是具有副作用的。請確保在 package.json 中移除 "sideEffects": false，否則 CSS 代碼塊會在生產(chǎn)環(huán)境構(gòu)建時被 webpack 丟掉。

Vue vs. JS/TS 入口文件

當(dāng)使用一個 .vue 文件作為入口時，你的庫會直接暴露這個 Vue 組件本身，因為組件始終是默認(rèn)導(dǎo)出的內(nèi)容。

然而，當(dāng)你使用一個 .js 或 .ts 文件作為入口時，它可能會包含具名導(dǎo)出，所以庫會暴露為一個模塊。也就是說你的庫必須在 UMD 構(gòu)建中通過 window.yourLib.default 訪問，或在 CommonJS 構(gòu)建中通過 const myLib = require('mylib').default 訪問。如果你沒有任何具名導(dǎo)出并希望直接暴露默認(rèn)導(dǎo)出，你可以在 vue.config.js 中使用以下 webpack 配置：

module.exports = {
  configureWebpack: {
    output: {
      libraryExport: 'default'
    }
  }
}

Web Components 組件

兼容性提示

Web Components 模式不支持 IE11 及更低版本。更多細(xì)節(jié)

注意對 Vue 的依賴

在 Web Components 模式中，Vue 是外置的。這意味著包中不會有 Vue，即便你在代碼中導(dǎo)入了 Vue。這里的包會假設(shè)在頁面中已經(jīng)有一個可用的全局變量 Vue。

你可以通過下面的命令將一個單獨的入口構(gòu)建為一個 Web Components 組件：

vue-cli-service build --target wc --name my-element [entry]

注意這里的入口應(yīng)該是一個 *.vue 文件。Vue CLI 將會把這個組件自動包裹并注冊為 Web Components 組件，無需在 main.js 里自行注冊。也可以在開發(fā)時把 main.js 作為 demo app 單獨使用。

該構(gòu)建將會產(chǎn)生一個單獨的 JavaScript 文件 (及其壓縮后的版本) 將所有的東西都內(nèi)聯(lián)起來。當(dāng)這個腳本被引入網(wǎng)頁時，會注冊自定義組件 <my-element>，其使用 @vue/web-component-wrapper 包裹了目標(biāo)的 Vue 組件。這個包裹器會自動代理屬性、特性、事件和插槽。請查閱 @vue/web-component-wrapper 的文檔了解更多細(xì)節(jié)。

注意這個包依賴了在頁面上全局可用的 Vue。

這個模式允許你的組件的使用者以一個普通 DOM 元素的方式使用這個 Vue 組件：

<script src="https://unpkg.com/vue" rel="external nofollow"  rel="external nofollow" ></script>
<script src="path/to/my-element.js"></script>

<!-- 可在普通 HTML 中或者其它任何框架中使用 -->
<my-element></my-element>

注冊多個 Web Components 組件的包

當(dāng)你構(gòu)建一個 Web Components 組件包的時候，你也可以使用一個 glob 表達(dá)式作為入口指定多個組件目標(biāo)：

vue-cli-service build --target wc --name foo 'src/components/*.vue'

當(dāng)你構(gòu)建多個 web component 時，--name 將會用于設(shè)置前綴，同時自定義元素的名稱會由組件的文件名推導(dǎo)得出。比如一個名為 HelloWorld.vue 的組件攜帶 --name foo 將會生成的自定義元素名為 <foo-hello-world>。

異步 Web Components 組件

當(dāng)指定多個 Web Components 組件作為目標(biāo)時，這個包可能會變得非常大，并且用戶可能只想使用你的包中注冊的一部分組件。這時異步 Web Components 模式會生成一個 code-split 的包，帶一個只提供所有組件共享的運(yùn)行時，并預(yù)先注冊所有的自定義組件小入口文件。一個組件真正的實現(xiàn)只會在頁面中用到自定義元素相應(yīng)的一個實例時按需獲?。?/p>

vue-cli-service build --target wc-async --name foo 'src/components/*.vue'

File                Size                        Gzipped

dist/foo.0.min.js    12.80 kb                    8.09 kb
dist/foo.min.js      7.45 kb                     3.17 kb
dist/foo.1.min.js    2.91 kb                     1.02 kb
dist/foo.js          22.51 kb                    6.67 kb
dist/foo.0.js        17.27 kb                    8.83 kb
dist/foo.1.js        5.24 kb                     1.64 kb

現(xiàn)在用戶在該頁面上只需要引入 Vue 和這個入口文件即可：

<script src="https://unpkg.com/vue" rel="external nofollow"  rel="external nofollow" ></script>
<script src="path/to/foo.min.js"></script>

<!-- foo-one 的實現(xiàn)的 chunk 會在用到的時候自動獲取 -->
<foo-one></foo-one>