Building multiple language files at the same time will get the same dist files

[tychenjiajun]

Reproduce:
package.json

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "yarn run zh && yarn run en",
    "lint": "vue-cli-service lint",
    "zh": "vue-cli-service build --mode zh --dest dist/zh",
    "en": "vue-cli-service build --mode en --dest dist/en"
  }
}

vue.config.js

module.exports = {
    chainWebpack: config => {
        config.module
            .rule('vue')
            .use('jeanrry-loader')
            .loader('jeanrry-loader')
            .options({
                queryName: 'i18n',
                blockName: 'i18n',
                locale: process.env.VUE_APP_JEANRRY_LOCALE
            })
    }
}

then run

diff dist/en/js/app.c4961717.js dist/zh/js/app.c4961717.js

no output. The two built files are the same, which means the translation is the same.

[tychenjiajun]

The only way I find to solve it is to modify the webpack config of vue-loader and cache-loader

vue.config.js

const hash = require('hash-sum')

module.exports = {
    chainWebpack: config => {
        config.module
            .rule('vue')
            .use('cache-loader')
            .loader('cache-loader')
            .tap(options => {
                options.cacheIdentifier = hash([options.cacheIdentifier, process.env.VUE_APP_JEANRRY_LOCALE])
                return options
            }).end()
            .use('vue-loader')
            .loader('vue-loader')
            .tap(options => {
                options.cacheIdentifier = hash([options.cacheIdentifier, process.env.VUE_APP_JEANRRY_LOCALE])
                return options
            }).end()
            .use('jeanrry-loader')
            .loader('jeanrry-loader')
            .options({
                queryName: 'i18n',
                blockName: 'i18n',
                locale: process.env.VUE_APP_JEANRRY_LOCALE
            })
    }
}