使用 vue-cli-service build --target lib 时,如何在 /dist 文件夹中复制 *.html 文件?
How can I copy a *.html file in /dist folder when using vue-cli-service build --target lib?
虽然我显然不是 webpack 专家,但我通常会 figure/find 列出我需要修改的内容以实现我的需要。然而,我在这个问题上损失了一天多的时间,尽管它看起来相当简单:
我想添加一个 index.html
到构建中,在构建之后,通过从文件夹中复制它。
我尝试将此添加到 configureWebpack
,在 vue.config.js
:
plugins: [
new CopyPlugin([{
from: 'deploy',
to: '/',
force: true,
copyUnmodified: true
}])
]
(deploy
文件夹中唯一的文件是这个 index.html
)。
我还尝试了 chainWebpack
的各种版本,主要是从 github 讨论中挑选出来的,试图利用 html
、move-index
和 copy
等插件.但是,我在 github 上发现的大部分内容都破坏了我的构建。
即使是简单的尝试,我只是尝试点击和控制台似乎都不起作用:
chainWebpack: config => {
config
.plugin('html')
.tap(args => {
console.log(args);
return args;
});
},
输出:
Building for production as library (commonjs,umd,umd-min)...[]
ERROR TypeError: Cannot read property '__expression' of undefined`
...
at module.exports.toConfig (D:\sgn\www\_g\berwow\BERWoW\Client\RecommenderV2\node_modules\webpack-chain\src\Config.js:129:40)
到目前为止我发现了什么:
- CopyPlugin 要么不起作用,要么对
.html
个文件有异常。
- 至少有两个插件:(
move-index
& html
) 可能会干扰我的副本。我还不知道如何将我的更改推到队列的后面。
我也尝试使用 test.html
,我还尝试在我的文件 .txt
上放置一个不同的扩展名,并在复制它时覆盖它,返回到 .html
。大多数时候我都会出错。
是否有一种相对直接的方法来利用 vue-cli-serve
的 build
命令并简单地将 index.html
复制到文件夹?
我使用的构建命令是:
vue-cli-service build --target lib --name SomeName --inline-css --inline-vue src/main.ts
请注意这是一个 --target lib
构建,它不会将 index.html
输出到 dist
文件夹,而是 demo.html
。所以我建议针对 --target lib
构建测试任何解决方案,因为它的输出显然与正常构建不同。
这是 vue inspect
的输出:https://jsfiddle.net/websiter/rkh5ecvd/embedded/js/dark/#JavaScript
这是我的 vue.config.js
: https://jsfiddle.net/websiter/fou3y4zc/embedded/js/dark/#JavaScript 的当前内容,其中 configWebpack
和 chainWebpack
是对 addressing/peeking 上述问题的尝试。
我正在使用 @vue/cli 4.2.3
和 vue 2.6.11
以及 webpack 4.42.1
我想出了一个解决方法,只需 运行 npm i copyfiles -D
并将此位添加到 build
脚本中:
&& copyfiles -f ./deploy/* dist/Recommender
这不是问题的正确答案,而是解决问题的方法。但它有效:).
仍然对如何将其正确链接到 webpack 构建脚本感兴趣。
我知道这是一个老问题,但我想我会为在 Vue 3 中仍然遇到此问题的任何人添加更多详细信息。
我能够使用以下配置实现与 vue 3.0.0, @vue/cli-service 4.5.0, webpack 4.46.0 and copy-webpack-plugin 6.4.1 类似的输出:
vue.config.js
const CopyPlugin = require("copy-webpack-plugin");
/**
* @type {import('@vue/cli-service').ProjectOptions}
*/
module.exports = {
chainWebpack: (config) => {
// Disable HTML Generation.
config.plugins.delete("html");
config.plugins.delete("preload");
config.plugins.delete("prefetch");
// Copy all contents of the "static" src directory
// to the destination's root.
config.plugin("copy").use(CopyPlugin, [
{
patterns: [{ from: "./static", to: "./" }],
},
]);
},
};
npm 脚本:
vue-cli-service build --target lib --inline-vue --name app src/main.js
注意:“inline-vue”参数强制将 Vue 嵌入包中(参见 https://cli.vuejs.org/guide/build-targets.html#library)。
虽然我显然不是 webpack 专家,但我通常会 figure/find 列出我需要修改的内容以实现我的需要。然而,我在这个问题上损失了一天多的时间,尽管它看起来相当简单:
我想添加一个 index.html
到构建中,在构建之后,通过从文件夹中复制它。
我尝试将此添加到 configureWebpack
,在 vue.config.js
:
plugins: [
new CopyPlugin([{
from: 'deploy',
to: '/',
force: true,
copyUnmodified: true
}])
]
(deploy
文件夹中唯一的文件是这个 index.html
)。
我还尝试了 chainWebpack
的各种版本,主要是从 github 讨论中挑选出来的,试图利用 html
、move-index
和 copy
等插件.但是,我在 github 上发现的大部分内容都破坏了我的构建。
即使是简单的尝试,我只是尝试点击和控制台似乎都不起作用:
chainWebpack: config => {
config
.plugin('html')
.tap(args => {
console.log(args);
return args;
});
},
输出:
Building for production as library (commonjs,umd,umd-min)...[]
ERROR TypeError: Cannot read property '__expression' of undefined`
...
at module.exports.toConfig (D:\sgn\www\_g\berwow\BERWoW\Client\RecommenderV2\node_modules\webpack-chain\src\Config.js:129:40)
到目前为止我发现了什么:
- CopyPlugin 要么不起作用,要么对
.html
个文件有异常。 - 至少有两个插件:(
move-index
&html
) 可能会干扰我的副本。我还不知道如何将我的更改推到队列的后面。
我也尝试使用 test.html
,我还尝试在我的文件 .txt
上放置一个不同的扩展名,并在复制它时覆盖它,返回到 .html
。大多数时候我都会出错。
是否有一种相对直接的方法来利用 vue-cli-serve
的 build
命令并简单地将 index.html
复制到文件夹?
我使用的构建命令是:
vue-cli-service build --target lib --name SomeName --inline-css --inline-vue src/main.ts
请注意这是一个 --target lib
构建,它不会将 index.html
输出到 dist
文件夹,而是 demo.html
。所以我建议针对 --target lib
构建测试任何解决方案,因为它的输出显然与正常构建不同。
这是 vue inspect
的输出:https://jsfiddle.net/websiter/rkh5ecvd/embedded/js/dark/#JavaScript
这是我的 vue.config.js
: https://jsfiddle.net/websiter/fou3y4zc/embedded/js/dark/#JavaScript 的当前内容,其中 configWebpack
和 chainWebpack
是对 addressing/peeking 上述问题的尝试。
我正在使用 @vue/cli 4.2.3
和 vue 2.6.11
以及 webpack 4.42.1
我想出了一个解决方法,只需 运行 npm i copyfiles -D
并将此位添加到 build
脚本中:
&& copyfiles -f ./deploy/* dist/Recommender
这不是问题的正确答案,而是解决问题的方法。但它有效:).
仍然对如何将其正确链接到 webpack 构建脚本感兴趣。
我知道这是一个老问题,但我想我会为在 Vue 3 中仍然遇到此问题的任何人添加更多详细信息。
我能够使用以下配置实现与 vue 3.0.0, @vue/cli-service 4.5.0, webpack 4.46.0 and copy-webpack-plugin 6.4.1 类似的输出:
vue.config.js
const CopyPlugin = require("copy-webpack-plugin");
/**
* @type {import('@vue/cli-service').ProjectOptions}
*/
module.exports = {
chainWebpack: (config) => {
// Disable HTML Generation.
config.plugins.delete("html");
config.plugins.delete("preload");
config.plugins.delete("prefetch");
// Copy all contents of the "static" src directory
// to the destination's root.
config.plugin("copy").use(CopyPlugin, [
{
patterns: [{ from: "./static", to: "./" }],
},
]);
},
};
npm 脚本:
vue-cli-service build --target lib --inline-vue --name app src/main.js
注意:“inline-vue”参数强制将 Vue 嵌入包中(参见 https://cli.vuejs.org/guide/build-targets.html#library)。