构建目标 #

运行 vue-cli-service build 时，可以通过 --target 选项指定不同的构建目标。这使您可以使用相同的代码库为不同的用例生成不同的构建。

应用 #

应用是默认的构建目标。在此模式下

• index.html 具有资产和资源提示注入
• 供应商库被拆分为单独的块，以便更好地缓存
• 小于 8KiB 的静态资源被内联到 JavaScript 中
• public 中的静态资源被复制到输出目录

库 #

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

您可以使用以下命令构建单个入口作为库

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。

lib 构建输出

• dist/myLib.common.js：一个 CommonJS 捆绑包，用于通过捆绑器使用（不幸的是，webpack 目前还不支持捆绑包的 ES 模块输出格式）

• dist/myLib.umd.js：一个 UMD 捆绑包，用于直接在浏览器中或使用 AMD 加载器使用

• dist/myLib.umd.min.js：UMD 构建的压缩版本。

• dist/myLib.css：提取的 CSS 文件（可以通过在 vue.config.js 中设置 css: { extract: false } 强制内联）

Vue vs. JS/TS 入口文件 #

使用 .vue 文件作为入口时，您的库将直接公开 Vue 组件本身，因为组件始终是默认导出。

但是，当您使用 .js 或 .ts 文件作为入口时，它可能包含命名导出，因此您的库将作为模块公开。这意味着您的库的默认导出必须在 UMD 构建中作为 window.yourLib.default 访问，或者在 CommonJS 构建中作为 const myLib = require('mylib').default 访问。如果您没有任何命名导出并希望直接公开默认导出，您可以在 vue.config.js 中使用以下 webpack 配置

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

Web 组件 #

vue-cli-service build --target wc --inline-vue

您可以使用以下命令构建单个入口作为 Web 组件

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

请注意，入口应为 *.vue 文件。Vue CLI 会自动将组件包装并注册为 Web 组件，您无需在 main.js 中自己执行此操作。您可以将 main.js 作为演示应用程序仅用于开发。

构建将生成一个包含所有内容的单个 JavaScript 文件（及其压缩版本）。该脚本在页面上包含时，会注册 <my-element> 自定义元素，该元素使用 @vue/web-component-wrapper 包装目标 Vue 组件。包装器会自动代理属性、属性、事件和插槽。有关更多详细信息，请参阅 @vue/web-component-wrapper 的文档。

请注意，捆绑包依赖于 Vue 在页面上全局可用。

此模式允许您的组件的使用者将 Vue 组件用作普通的 DOM 元素

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

<!-- use in plain HTML, or in any other framework -->
<my-element></my-element>

注册多个 Web 组件的捆绑包 #

构建 Web 组件捆绑包时，还可以通过使用通配符作为入口来定位多个组件

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

构建多个 Web 组件时，--name 将用作前缀，自定义元素名称将从组件文件名推断出来。例如，使用 --name foo 和名为 HelloWorld.vue 的组件，生成的自定义元素将注册为 <foo-hello-world>。

异步 Web 组件 #

定位多个 Web 组件时，捆绑包可能会变得相当大，用户可能只使用捆绑包注册的几个组件。异步 Web 组件模式会生成一个代码拆分的捆绑包，其中包含一个小的入口文件，该文件提供所有组件之间的共享运行时，并在启动时注册所有自定义元素。然后，只有在页面上使用相应自定义元素的实例时，才会按需获取组件的实际实现

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

现在在页面上，用户只需要包含 Vue 和入口文件

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

<!-- foo-one's implementation chunk is auto fetched when it's used -->
<foo-one></foo-one>

在构建中使用 vuex #

构建 Web 组件 或 库 时，入口点不是 main.js，而是 entry-wc.js 文件，该文件在此处生成： https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-service/lib/commands/build/resolveWcEntry.js

因此，要在 Web 组件目标中使用 vuex，您需要在 App.vue 中初始化存储

import store from './store'

// ...

export default {
  store,
  name: 'App',
  // ...
}