Created
March 31, 2022 17:39
-
-
Save mattbryson/6951c54402061d02c379b32d5ec0e8df to your computer and use it in GitHub Desktop.
Configuring web pack for the vue i18n package in a Vue CLI 5 project (vue 3) without the i18n plugin
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const { defineConfig } = require('@vue/cli-service'); | |
const path = require('path'); | |
module.exports = defineConfig({ | |
chainWebpack: (config) => { | |
// Manually configure webpack for vue i18n without using the vue-cli-plugin-i18n as it doesnt fully work in vue 3 | |
// dont forget to install `vue-i18n@9` and `@intlify/vue-i18n-loader` | |
// chose a vue-i18n build that does not compile locales on the fly | |
config.resolve.alias.set('vue-i18n', 'vue-i18n/dist/vue-i18n.runtime.esm-bundler.js'); | |
// Compiler flags | |
config.plugin('vue-i18n-feature-flags').use( | |
new webpack.DefinePlugin( | |
{ | |
__VUE_I18N_LEGACY_API__: 'false', | |
__VUE_I18N_FULL_INSTALL__: 'false', | |
__VUE_I18N_PROD_DEVTOOLS__: 'false' | |
} | |
) | |
); | |
// A loader for external local.js files so they can be compiled at build time | |
config.module | |
.rule('i18n-resource') | |
.test(/\.(json5?|ya?ml)$/) | |
.type('javascript/auto') | |
.use('i18n-resource').loader('@intlify/vue-i18n-loader').end() | |
.include.add(path.resolve(__dirname, 'src/locales')).end(); | |
// A loader for SFC i18n blocks so they can be compiled at build time | |
config.module | |
.rule('i18n') | |
.resourceQuery(/blockType=i18n/) | |
.type('javascript/auto') | |
.use('i18n').loader('@intlify/vue-i18n-loader').end(); | |
} | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment