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

时间:2018-10-23 10:23:20

标签: webpack vue-cli-3

我希望每种语言都有不同的版本。转换后的字符串将被烘焙到不同的版本中:

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

我知道使用webpack.config.js,您可以执行以下操作:

module.exports = [configA, configB]

它将基于configAconfigB构建两个版本的应用。

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

vue.config.js中,您可以在configureWebpack中提供webpack配置,但这必须是一个对象(或返回对象的函数),这意味着我无法为数组提供不同的每个构建的配置选项。

如何使用vue-cli构建多个dist?

1 个答案:

答案 0 :(得分:0)

我最终解决的方法是创建一个单独的构建脚本,该脚本每次都会使用不同的参数调用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}`)
}