使用 vue-cli 输出多个 webpack 构建

Question

我希望每种语言都有不同的构建。翻译后的字符串将被烘焙到不同的版本中：

/dist
    app-en.js
    app-nl.js
    app-de.js

我知道在 webpack.config.js 中，您可以执行以下操作：

module.exports = [configA, configB]

它将根据 configA 和 configB.

构建您的应用程序的两个版本

我的项目是基于vue-cli，所以我没有webpack.config.js，只有vue.config.js。

在vue.config.js中，你可以在configureWebpack中提供webpack配置，但这必须是一个对象（或者一个returns对象的函数），这意味着我不能为每个构建提供具有不同配置选项的数组。

如何使用 vue-cli 构建多个 dists？

Answer 1

我最终解决的方法是创建一个单独的构建脚本，每次都会调用带有不同参数的 vue 构建命令：

//build.js
languages.forEach((language) => {
    execSync(`npx vue-cli-service build --language ${language} --mode ${args.mode}`)
}

在vue.config.js中，我使用minimist从参数中提取给定的语言，之后我可以指定不同的outputDir:

//vue.config.js
const args = require('minimist')(process.argv.slice(2))
const language = args.language

module.exports = {
    outputDir: path.resolve(__dirname, `dist/${language}`)
}

使用 vue-cli 输出多个 webpack 构建

Outputting multiple webpack builds with vue-cli

webpack

vue-cli-3