Vue Cli 3 - 编译 Web 组件时在 dist 中包含 js 文件

Posted 2023-02-22

【中文标题】Vue Cli 3 - 编译 Web 组件时在 dist 中包含 js 文件

【英文标题】：Vue Cli 3 - Include js file in dist when compile web component

【发布时间】：2019-11-01 06:35:13

【问题描述】：

我正在开发一个使用 Vue Cli 3 创建的项目，并且一直在使用 Vue Web 组件。

我需要创建一个需要不同库的加载器文件（称为 loader.js）。

require(‘.node_modules/…/…/library.js’);
require(‘.node_modules/…/…/script.js’);

我使用这个命令来编译 web 组件：

vue-cli-service build --target wc --name widget ./src/components/widget.vue

此时我需要的是，在构建 web 组件时，webpack 也会处理 loader.js 文件并将所有 require 捆绑到 dist 文件夹中。

我是 webpack 的新手，我不知道如何解决这个问题。我尝试使用 CopyWebpackPlugin，但它只复制了 loader.js 文件并且不包含所需文件。

module.exports = 
plugins: [
  new CopyWebpackPlugin(
    [
      
        from: 'src/loader.js',
        to: '.',
      ,
    ],
  ),
],

我该如何解决这个问题？

【问题讨论】：

如果您的组件中的任何地方都没有引用src/loader.js，则它不会被捆绑。删除CopyWebpackPlugin 配置，并从您的组件文件中导入src/loader.js。

嗨@sergimbo，只是想知道我们是否能够解决这个问题？我也在尝试实现这一点。

我也在寻找解决方案，当目标是库时遇到这个问题

以防这个答案在此之后对某人有所帮助，我找到了解决此问题的方法。我创建了一个“包装器”脚本，在其中手动复制了loader.jsfile，然后执行了“vue-cli-service build ...”命令。

【参考方案1】：

如果是静态js文件，可以添加到public文件夹中

public 文件夹

任何放置在public 文件夹中的静态资源都将被简单地复制而不通过 webpack。您需要使用绝对路径来引用它们。

源代码：https://cli.vuejs.org/guide/html-and-static-assets.html#the-public-folder

如果它是和/或具有依赖关系，则在主代码中使用 import 会将其包含在包中。

【讨论】：

这仅在目标是 App 时有效。 cli.vuejs.org/guide/build-targets.html#app我正在使用 WebComponents 目标