vue2 国际化的使用，自动翻译文件，自动生成国际化文件

你的眼睛會笑

于 2024-01-30 16:59:34 发布

阅读量494

点赞数 9

分类专栏： vue2 文章标签： vue.js 前端

本文链接：https://blog.csdn.net/weixin_45563734/article/details/135935888

版权

vue2 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

vue2 国际化的使用，自动翻译文件，自动生成国际化文件

npm i vue-i18n@6
文件代码

// zh.js  用来写全局通用的国际化
export default {
    home:"首页"
}

//en.js  用来写全局通用的国际化
export default {
    home:"home page"
}

//kor.js  用来写全局通用的国际化
export default {
    home:"첫 페이지"
}

// index.js
/*
 * @Author: xyx
 * @Date: 2024-01-30 13:47:20
 * @LastEditors: xyx
 * @LastEditTime: 2024-01-30 14:26:14
 * @FilePath: \xyjc\idc_platform_h5\lang\index.js
 * @Description: 
 */
 
import zh from './zh.js'
import en from './en.js'
import kor from './kor.js'
 
import VueI18n from 'vue-i18n'; 
import Vue from 'vue'
Vue.use(VueI18n);
 

// 自动引入  ./module 下面的所有js （对自动翻译的文件，自动生成的国际化文件 进行自动引入）
// 上图中的 ./module 下的文件 为自动生成的文件
const modulesFiles = require.context("./module", true, /\.js$/);

const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, "$1");
  const value = modulesFiles(modulePath);
  modules[moduleName] = value.default;
  return modules;
}, {});

let zhList = {...zh}
let enList = {...en}
let korList = {...kor}
for (const key in modules) {
    if (Object.hasOwnProperty.call(modules, key)) {
        const el = modules[key];
        console.log(el)
        zhList = Object.assign({}, zhList, el.cn)
        enList = Object.assign({}, enList,el.en)
        korList = Object.assign({}, korList,el.kor)
    }
}

const i18n = new VueI18n({
	locale: 'kor',
	messages: {
		'cn': zhList,//简体
		'en':enList,//英文
		'kor':korList,//英文
	}
})
export default i18n;

// main.js 全局引入
import i18n from '@/lang/index.js';
const app = new Vue({
	i18n,
})

// 页面使用
  // 切换为英文
  this.$i18n.locale = "en"
  // 切换为中文
  this.$i18n.locale = "zh"
  // 切换为韩文
  this.$i18n.locale = "kor"

***重点来了。。。。。。***

开发工具使用 vscode
vscode搜索插件Du I18N并安装
安装好之后，点击设置，自动生成配置文件 du-i18n.config.json

//du-i18n.config.json

{
	"quoteKeys": [
		"this.$t",
		"$t",
		"i18n.t"
	],
	"defaultLang": "zh",
	"tempLangs": [
		"zh",
		"en",
		"kor"
	],
	"langPaths": "**/utils/i18n/locale/**",
	"transSourcePaths": "**/utils/i18n/source/**",
	"tempPaths": "**/utils/i18n/temp/**",
	"tempFileName": "i18n",
	"multiFolders": [
		"src",
		"pages"
	],
	"uncheckMissKeys": [],
	"isSingleQuote": true,
	"isOnlineTrans": true,
	 // 下图中的APP ID
	"baiduAppid": "***************", 
	 // 下图中的秘钥
	"baiduSecrectKey": "***************"
}