vue项目国际化(多语言)

Posted 2023-02-23

参考技术A

记录一下笔记，以下 vue 项目案例使用 vue-cli 搭建 ;

1. 使用 npm 命令安装所需依赖 vue-i18n , 此demo安装的版本为 vue-i18n@8.24.2 ;

main.js

二.配置多语言包

language > config > zh-hk.js

language > config > en.js

import Vue from \'vue/dist/vue.min.js\';
import VueI18n from \'vue-i18n/dist/vue-i18n\';
import Cookies from \'js-cookie\';

Vue.use(VueI18n);

// 存储在本地,刷新后不会丢失
const language = Cookies.get(\'language\') || \'zh\';
Cookies.set( \'language\' , language )
const i18n = new VueI18n(
locale: language, // 语言标识
messages:
zh: require(\'./config/zh\'), // 中文
\'zh-hk\': require(\'./config/zh-hk\'), // 中文繁体-香港
en: require(\'./config/en\'), // 英文

);

export default i18n;

...
// 引入配置文件index
import i18n from "./language"

new Vue(
el: \'#app\',
router,
store,
i18n, // 挂载到vue实例
components: App ,
template: \'<App/>\'
)

<li><a href="javascript:;">语言切换/ $t(\'language.name\') </a></li>

console.log(this.$t(\'language.name\'));

<li><a href="javascript:;">语言切换/ $t(\'language.name\') </a></li>

<li><a href="javascript:;" @click="changeLang">语言切换/ $t(\'language.name\') </a></li>

changeLang() let currentLang = Cookie.get(\'language\'); if(currentLang === \'zh\') this. i18n.locale = \'en\'; Cookie.set(\'language\',\'en\') else if(currentLang === \'en\') this.$i18n.locale = \'zh\'; Cookie.set(\'language\',\'zh\')

changeLang() let currentLang = Cookie.get(\'language\'); if(currentLang === \'zh\') Cookie.set(\'language\',\'zh-hk\') else if(currentLang === \'zh-hk\') Cookie.set(\'language\',\'en\') else if(currentLang === \'en\') Cookie.set(\'language\',\'zh\') location.reload(); // 刷新页面