Vue I18n官网 ：Vue I18n
npm install vue-i18n --save
说明：直接下载最新版本的时候，出现了一个报错，后来换回了低一点的版本（如：8.22.1版本），就没出现把报错了，具体的报错如下：
Uncaught TypeError: Cannot read properties of undefined (reading ‘install‘) 页面一片空白
（具体原因目前还没排查处理，如果大家有解决方案，欢迎评论留言~）
在src文件夹下，新建plugins文件夹，里边有两个语言文件包：en.json（英文语言包） 、zh.json（中文语言包）目录如图：
en.json文件：
{
"login": {
"loginBtn": "LOGIN",
"loginTitle": "User Login",
"userName": "Please enter username!",
"password": "Please enter password!"
}
}
zh.json文件：
{
"login": {
"loginBtn": "登录",
"loginTitle": "用户登录",
"userName": "请输入用户名",
"password": "请输入密码"
}
}
i18n.js文件：
import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
function loadLocaleMessages() {
const locales = require.context('./lang', true, /[A-Za-z0-9-_,\s]+\.json$/i) // 在vue项目中使用require.context()引入某个文件夹下所有文件
console.log('locales:', locales)
const messages = {}
locales.keys().forEach(key => {
const matched = key.match(/([A-Za-z0-9-_]+)\./i)
if (matched && matched.length > 1) {
const locale = matched[1]
messages[locale] = locales(key)
}
})
return messages
}
export default new VueI18n({
locale: process.env.VUE_APP_I18N_LOCALE || 'zh', // 设置页面的默认语言
fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'zh',
messages: loadLocaleMessages()
})
此外，还要在vue.config.js文件中，配置以下内容：
pluginOptions: {
i18n: {
locale: 'en',
fallbackLocale: 'en',
localeDir: 'i18n',
enableInSFC: true
}
},
main.js文件引入i18n
import i18n from './plugins/i18n/i18n.js' // 使用i18n实现国际化
console.log('i18n:', i18n)
i18n.locale = 'zh' // 初始化i18n，默认英文显示
new Vue({
router,
store,
i18n,
render: h => h(App)
}).$mount('#baseApp')
<el-button :loading="loading" type="primary" @click="subLogin">{{ $t('login.loginBtn') }}</el-button>
4、注意：语言包文件的数据持久化。
5、在xx.js文件中使用i18n的注意事项：
（方法一）：在main.js把Vue对象赋值给一个window上的一个对象vm
window.vm = new Vue({
el: '#app',
i18n,
router,
store,
template: '<App/>',
components: { App }
})
使用的时候就这样用 ：
（方法二）：
存在的问题：上面的是关于登录表单的校验，如第一次默认语言是中文，能正确显示校验提示，但是切换语言后，比如英文，校验提示还是显示中文，并没有同步切换回英文。
解决方案：
