安装依赖
yarn add vue-i18n@next
yarn add vue-i18n@9.2.2
# or
npm install vue-i18n@next
目录配置
注
语言翻译文档文件可以放在大多数位置，此处放在language文件夹下。
当然也可以在对应模块的文件夹下新建一个文件夹如language-data，在里面存放翻译文档。只要注意页面中引入翻译文档时，路径正确即可。
如下
各目录下代码
【src/language/index.js】
import { createI18n } from "vue-i18n";
/**
* 在此处配置i18n语言类型项，此处配置对应语言后，需在语言文档里添加对应信息
* 如配置一个新语言JP，在此处配置后，需在/language/common/demo.js等语言文档下新增一个JP:{...}项
*/
const languageTypes = [
{ key: "CN", name: "简体中文", alias: "简体" },
// { key: "HK", name: "繁體中文", alias: "繁體" },
{ key: "EN", name: "English", alias: "English" },
];
// 创建 i18n 配置
const setupI18n = (app) => {
let i18nOptions = {
locale: languageTypes[0].key, // 本地化语言
fallbackLocale: languageTypes[1].key, // 备选语言
legacy: false, //是否启用传统模式，默认true启用，需要在Composition API中使用则设为false
// globalInjection: true, //全局注入，页面内调用全局i18n需要用$t('xxx')，而非t('xxx')
silentFallbackWarn: true,
};
app.use(createI18n(i18nOptions));
};
export {
languageTypes,
setupI18n,
};
【main.js】
import { createApp } from "vue";
import App from "./App.vue";
import { setupI18n } from "@/language/index";
const app = createApp(App); //创建vue实例
async function setupApp() {
/* i18n语言切换 */
setupI18n(app);
app.mount("#app");
}
setupApp();
【src/utils/language/toggleLanguage.js】
import { languageTypes } from "@/language/index";
/**
* 接收两个参数
* @param {*} locale
* vue-i18n 9.x版本locale信息需要使用useI18n获取
* 但useI18n函数规定不可在setup之外调用，故需要先在setup中，获取useI18n().locale，再传到这里
* @param {*} value 需要设置成哪种语言，CN-中文，EN-英文等，语言类型在language/index.js下配置languageTypes
*/
const toggleLanguage = (locale, value) => {
if (value) {
locale.value = value;
localStorage.setItem("languageType", locale.value);
} else {
// 自动化判断语言类型并做切换
for (let i in languageTypes) {
if (locale.value == languageTypes[i].key) {
//判断当前语言类型
let nexti = Number.parseInt(i) + 1;
nexti = nexti >= languageTypes.length ? 0 : nexti; //判断为最后一个语言类型，则从头开始
locale.value = languageTypes[nexti].key; //切换到下一个语言类型
localStorage.setItem("languageType", locale.value);
return;
}
}
}
};
export default toggleLanguage;
【src/utils/language/index.js】
import toggleLanguage from "./toggleLanguage";
export default {
toggleLanguage
}
【src/utils/index.js】
import languageUtil from "./language";
export {
languageUtil
};
【src/language/common/demo.js】
module.exports = {
messages: {
CN: {
userLogin: "用户登录{uname}",
loginAccount: "账号密码登录",
loginPhone: "手机短信登录",
},
HK: {
userLogin: "用戶登錄{uname}",
loginAccount: "賬號密碼登錄",
loginPhone: "手機短信登錄",
},
EN: {
userLogin: "Sign In{uname}",
loginAccount: "By User Name",
loginPhone: "By Phone Number",
},
},
};
【src/views/language-demo.vue】
<template>
<div class="home tlc">
<!-- 常规用法 -->
<div>{{ t("loginAccount") }}</div>
<!-- 具名插值 -->
<div>{{ t("userLogin", { uname: "嘻哈" }) }}</div>
<!-- 使用全局属性，用$t -->
<div>{{ $t("globalText") }}</div>
<!-- 切换语言 -->
<button @click="setLanguage">切换</button>
</div>
</template>
<script>
import { useI18n } from "vue-i18n"; //【使用i18n--step1】
import { languageUtil } from "@/utils/index"; //【语言切换--step1】
export default {
setup() {
const {t} =useI18n(require("@/language/common/demo")) //【使用i18n--step2（获取common/demo文件下的语言数据）】
const { locale } = useI18n(); //【语言切换--step2（这里不需要require指定文件。而是需要获取全局的locale，否则不能全局生效）】
function setLanguage() {
languageUtil.toggleLanguage(locale, ""); //【语言切换--step3】
// languageUtil.toggleLanguage(locale, "EN"); //【语言切换--step3--指定切换的语言类型】
}
return {
t, //【使用i18n--step3】
setLanguage,
};
},
};
</script>
<style scoped lang="less"></style>
解决报错
报错
解决
报错
You are running the esm-bundler build of vue-i18n. It is recommended to configure your bundler to explicitly replace feature flag globals with boolean literals to get proper tree-shaking in the final bundle.
解决
chainWebpack: (config) => {
config.resolve.alias.set("vue-i18n", "vue-i18n/dist/vue-i18n.cjs.js"); // 解决基于vue3引入vue-i18n的报错
},
其他参考链接
解决i18n打包上线后，i18n插槽语法失效问题
https://www.cnblogs.com/huihuihero/p/18267275
