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

里努克斯

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

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

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

module.exports = [configA, configB]

它将基于configA构建两个版本的应用程序configB

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

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

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

里努克斯

我最终解决的方法是创建一个单独的构建脚本,该脚本每次都会使用不同的参数调用vue build命令:

//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}`)
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何使用Webpack从生产构建中排除CommonJS库(vue-cli)

如何使用webpack为多个目标构建?

使用 Vue、Typescript 和 Webpack 构建库

Vue-CLI webpack-simple 模板 - 如何运行构建

使用 Webpack 实现 Vue SFC(无 Vue CLI)

使用Vue CLI Webpack后如何部署Vue应用

使用 webpack (@vue/cli@next) 构建时如何排除 element-plus 包(由 import CDN 替换)?

如何使用angular-cli构建多个应用程序?

如何使用FAKE将项目构建到多个输出?

vue-cli构建未使用库的缩小版本

使用angular-cli Webpack创建多个包

如何使用Vue Cli 3配置Webpack-simple?

无法使用 vue/cli 创建 Vue 项目

Webpack:使用一个条目生成多个输出

在PHP项目中使用vue-cli输出?

vue-cli-service构建:新的workbox-webpack-plugin选项的validationError

Vue CLI-将构建输出组合到单个html文件中

使用vue-cli 3将vue依赖项捆绑到Web组件构建中

使用vue-cli-service构建时,是否可以获取嵌套的.vue文件?

使用Webpack导入Vue组件

在通过vue-cli webpack创建的Vue应用中使用font-awesome

如何在vue-cli Webpack项目(vue.js)中使用Greensock插件

vue Webpack模板(通过vue-cli)以后会变得更易于使用吗?

运行使用CLI和Webpack 4构建的应用程序时出错

在vue-cli 3.x的监视模式下每个webpack的自动构建之后,如何执行自己的脚本?

使用Webpack构建在插件中注册多个自定义gutenberg块

如何在不使用webpack的情况下让Flask查看Vue构建文件?

Webpack可以使用Coffee-loader构建Vue模板吗?

如何使用Keras构建具有多个输入和单个输出的模型