Vue CLI 建立目标

Posted 2021-10-27 书和咖啡

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

我们主要从下面几个方面进行认识和了解：

应用程序

应用程序是默认生成目标，在此模式下：

• 带资产和资源提示注入的 index.html

• 供应商库被分割成一个单独的块以获得更好的缓存

• 4kb以下的静态资产内联到javascript中`

• public 中的静态资产被复制到输出目录中

Vue与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组件

兼容性：Web组件模式不支持IE11及以下版本。

关于Vue依赖性的说明：在web组件模式下，Vue被外部化，也就意味着即使代码导入Vue，捆绑包也不会捆绑Vue，该捆绑包将假定Vue作为全局变量在主机页上可用。

如果要避免这种情况，我们需要提供 --inline vue flag To build 命令。

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

还可以使用以下内容将单个条目构建为Web组件：

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

链接：https://www.9xkd.com/