May 07, 2021 Vue CLI
When you run the vue-cli-service build, you can specify different build targets through the --target option. It allows you to build different builds with the same source code based on different use cases.
The app mode is the default mode. In this mode:
Reminders about IE compatibility
In library mode, the project's publicPath is dynamically set based on the loading path of the main file (to support dynamic resource loading capabilities). H owever, this feature is available with document.currentScript, which is not supported by the IE browser. So if your site needs to support IE, it's recommended that you introduce current-script-polyfill on the page before using the library.
Note the dependency on Vue
In library mode, Vue is external. T his means that there will be no Vue in the package, even if you imported Vue into your code. If the library is used through a packager, it will attempt to load Vue as a dependency through the packager;
To avoid this behavior, you can add the --inline-vue flag to the build command.
vue-cli-service build --target lib --inline-vue
You can build a separate portal as a library with the following command:
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
This entry can be a .js or a .vue file. If no entry is specified, src/App.vue is used.
Building a library outputs:
Warning
If you are developing a library or multi-project repository (monorepo), be aware that importing CSS can have side effects. Make sure to remove "sideEffects": false in package.json, otherwise the CSS code block will be thrown away by the webpack when it is built in production.
When you use a .vue file as an entry point, your library exposes the Vue component itself directly because the component is always the default exported content.
However, when you use an .js or .ts file as an entry point, it may contain a named export, so the library is exposed to a module. T his means that your library must be accessed through window.yourLib.default in the UMD build, or by const myLib s require ('mylib').default) in the CommonJS build. If you don't have any named exports and want to expose the default exports directly, you can use .js webpack configuration in the vue.config file:
module.exports = {
configureWebpack: {
output: {
libraryExport: 'default'
}
}
}
Compatibility tips
Web Components mode does not support IE11 and earlier. More details
Note the dependency on Vue
In Web Components mode, Vue is external. T his means that there will be no Vue in the package, even if you imported Vue into your code. The package here assumes that there is already a global variable vue available on the page.
You can build a separate portal as a Web Components component with the following command:
vue-cli-service build --target wc --name my-element [entry]
Note that the entrance here should be a .vue file. T he Vue CLI will automatically package and register this component as a Web Components component without having to register .js the main page. You can also use the main .js as a demo app when you develop.
The build will result in a separate JavaScript file (and its compressed version) inline everything. W hen this script is introduced into the Web page, the custom component, the @vue/web-component-wrapper, wraps the target Vue component. T his wrapper automatically agents properties, attributes, events, and slots. Please refer to @vue/web-component-wrapper for more details.
Note that this package relies on Vue, which is globally available on the page.
This pattern allows the consumer of your component to use this Vue component as a normal DOM element:
<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>
When you build a Web Components component package, you can also use a glob expression as an entry point to specify multiple component targets:
vue-cli-service build --target wc --name foo 'src/components/*.vue'
When you build multiple web components,-- the name will be used to set the prefix, and the name of the custom element will be derived from the component's file name. For example, a component called HelloWorld.vue carries -- name foo will generate a custom element named slt;foo-hello-world.
When you specify multiple Web Components components as targets, the package can become very large, and users may only want to use a portion of the components registered in your package. T he asynchronous Web Components pattern then generates a code-split package with a runtime that provides only all component shares and pre-registers all custom component entry files. The real implementation of a component is only available on demand when the corresponding instance of the custom element is used on the page:
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
Users now only need to introduce Vue and this portal file on this page:
<script src="https://unpkg.com/vue" rel="external nofollow" rel="external nofollow" ></script>
<script src="path/to/foo.min.js"></script>
<!-- foo-one 的实现的 chunk 会在用到的时候自动获取 -->
<foo-one></foo-one>