vue中自定义设置多语言，并且运行js脚本自动生成多语言文件

在项目中需要进行多个国家语言的切换时，可以用到下面方法其中一个

一、自定义设置多语言

方法一:

可以自己编写一个设置多语言文件

在项目新建js文件，命名为：language.js，代码如下

// language.js 文档
let languagePage = {CN: {frame_rules: "规则",frame_remark: "虚位拟待",},EN: {frame_rules: "Rules",frame_remark: "Vacant position",},IN: {frame_rules: "Aturan",frame_remark: "Posisi Kosong",},VI: {frame_rules: "Quy tắc",frame_remark: "Vị trí Trống",},MS: {frame_rules: "Peraturan",frame_remark: "Jawatan Kosong",},TH: {frame_rules: "กฎ",frame_remark: "ตำแหน่งว่าง",},HI: {frame_rules: "กฎ",frame_remark: "खाली पद",},
};
export const getLangue = () => {// 获取我们设置存放在浏览器的localStorage 的语言类型let { language } =JSON.parse(window.localStorage.getItem("userInfo")) || {};// if (language == "ar") {//   // 阿拉伯语 展示顺序会相反，设置反向，使语言展示正常//   document.documentElement.setAttribute("dir", "rtl");//   // document.getElementById("app") &&//   //   document.getElementById("app").classList.add("ar");// }// zh  中文// en 英文// in  印尼// vi  越南// ms 马拉西亚// th  泰语// hi  印度语// ar 阿拉伯语let list = {in: "IN",id: "IN",zh: "CN",ms: "MS",vi: "VI",th: "TH",hi: "HI",};//假设能读取到浏览器设置的语言，就使用该语言 ，假设没有设置到浏览器任何语言类型，就默认使用英文if (list[language]) return languagePage[list[language]];return languagePage.EN;
};

在组件中使用多语言：

<template><div><!-- 使用多语言 --><div>{{ language.frame_rules }}</div></div>
</template>
<script>
// 在需要的组件引入多语言文件
import { getLangue } from "@/utils/language.js";export default {data() {return {language: getLangue(), //赋值多语言};},mounted() {},computed: {},methods: {},
};
</script>
<style lang="scss" scoped></style>

设置类型语言：

你可以在app.vue的生命周期设置

//vue的生命周期mounted设置语言为中文
mounted() {const langType = JSON.stringify({ language: "zh" });window.localStorage.setItem("userInfo", langType);
},

当然，你可以写选择器，让用户选择对应的语言，然后强制刷新浏览器后便生效了

 const langType = JSON.stringify({ language: "zh" });window.localStorage.setItem("userInfo", langType);window.location.reload(); //设置完语言后 强制刷新浏览器才生效

方法二：使用使用vue-i18n 库，提示，下面展示是vue3中使用为例子

官方文档介绍：介绍 | Vue I18n

使用npm导入vue-i18n

npm i vue-i18n@next  --save

1、创建i18n所需文件夹（这里最好放置src下）

在src下建文件夹lang，在文件夹下新建文档 en.ts 和zh.ts 文档里面内容如下

en.ts文档：

// en.js文档//键值命名一定要和zh.ts 一一对应 ，键值的写法可用双引号，例如："OP_check"，也可不用。例如：home// 英文
const en = {"OP_check": "CHECK",home: "Home",
};
export default en;

zh.ts文档：

// zh.js文档// 中文
const zh = {"OP_check": "查看",home: "主页",
};
export default zh;

2.在文件夹lang新建文档命名 index.ts

index.ts文档：

import en from "./en"; // 英文
import zh from "./zh"; // 中文//导出所有翻译内容
export default {en,zh,
};

3、在文件夹lang新建文档命名 i18n.ts

i18n.ts文档

import { createApp } from "vue";
//这里注意引入的App.vue文件路径，确保文件成功被引进来
import App from "../App.vue";import { createI18n } from "vue-i18n";
import messages from "./index";const app = createApp(App);
const language = (navigator.language || "en").toLocaleLowerCase(); // 这是获取浏览器的语言if (!localStorage.getItem("lang")) {localStorage.setItem("lang", "en"); //设置默认语言为英文
}const i18n = createI18n({legacy: false, //处理报错Uncaught (in promise) SyntaxError: Not available in legacy mode (at message-compiler.esm-bundler.js:54:19)locale: localStorage.getItem("lang") || language.split("-")[0] || "en", //注意locale属性！ 首先从缓存里拿，没有的话就用浏览器语言，fallbackLocale: "en", // 设置备用语言messages,
});export default function (app: any) {app.use(i18n);
}

4、在vue的mian文件，全局注入多语言

主要代码如下；

import i18n from "@/lang/i18n"; //导入多语言app.use(i18n); //全局注入多语言

5、在项目中使用多语言

在dom元素上直接使用vue-i18n如下

<template><!-- 在 dom中使用vue-i18n--><div>{{ $t("home") }}</div>
</template>

在<script>脚本中使用vue-i18n如下

<template><!-- 在 dom中使用vue-i18n--><div>{{ $t("home") }}</div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { useI18n } from "vue-i18n"; //引入vue-i18n
const { t } = useI18n(); // 使用多语言关键字 t ——> vue-i18内置关键字，不可改写名字
const title = ref(t("OP_check"));  //在js代码中使用vue-i18n 这里的title === "CHECK"
</script>
<style scoped lang="scss"></style>

6、使用vue-i18n设置语言

<template><!-- 在 dom中使用vue-i18n--><div>{{ $t("home") }}</div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { useI18n } from "vue-i18n"; //引入vue-i18n
const { locale } = useI18n(); // 使用多语言关键字 locale ——> vue-i18内置关键字，不可改写名字
const changLanguage = (e: any) => {
// 设置语言,其中locale是vue-i18内置设置语言的固定方法；改变locale的值就是改变语言类型了if (Number(e) === 1) {locale.value = "en";localStorage.setItem("lang", "en");} else {locale.value = "zh";localStorage.setItem("lang", "zh");}window.location.reload(); // 设置语言完成后，强制刷新浏览器，效果更换好
};
</script>
<style scoped lang="scss"></style>

上面设置多语言需要一个个复制粘贴进去，在开发工作的过程中很麻烦，是非常浪费时间的无脑操作，下面我们通过脚本，自动生成多语言文档，

二、运行js脚本自动生成多语言文件

1、在src同级目录下，新建目录命名 tools

2.在tools 下新建文件夹命名lang

3、在lang文件夹下，新建文档命名：package-lock.json

package-lock.json文档代码如下

{"name": "app","version": "1.0.0","lockfileVersion": 1,"requires": true,"dependencies": {"@babel/runtime": {"version": "7.24.7","resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.7.tgz","integrity": "sha512-UwgBRMjJP+xv857DCngvqXI3Iq6J4v0wXmwc6sapg+zyhbwmQX67LUEFrkK5tbyJ30jGuG3ZvWpBiB9LCy1kWw==","requires": {"regenerator-runtime": "^0.14.0"}},"adler-32": {"version": "1.2.0","resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.2.0.tgz","integrity": "sha512-/vUqU/UY4MVeFsg+SsK6c+/05RZXIHZMGJA+PX5JyWI0ZRcBpupnRuPLU/NXXoFwMYCPCoxIfElM2eS+DUXCqQ==","requires": {"exit-on-epipe": "~1.0.1","printj": "~1.1.0"}},"babel-plugin-transform-remove-console": {"version": "6.9.4","resolved": "https://registry.npmjs.org/babel-plugin-transform-remove-console/-/babel-plugin-transform-remove-console-6.9.4.tgz","integrity": "sha512-88blrUrMX3SPiGkT1GnvVY8E/7A+k6oj3MNvUtTIxJflFzXTw1bHkuJ/y039ouhFMp2prRn5cQGzokViYi1dsg==","dev": true},"buffer-from": {"version": "1.1.2","resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz","integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ=="},"cfb": {"version": "1.2.2","resolved": "https://registry.npmjs.org/cfb/-/cfb-1.2.2.tgz","integrity": "sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==","requires": {"adler-32": "~1.3.0","crc-32": "~1.2.0"},"dependencies": {"adler-32": {"version": "1.3.1","resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.3.1.tgz","integrity": "sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A=="}}},"codepage": {"version": "1.15.0","resolved": "https://registry.npmjs.org/codepage/-/codepage-1.15.0.tgz","integrity": "sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA=="},"crc-32": {"version": "1.2.2","resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz","integrity": "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ=="},"exit-on-epipe": {"version": "1.0.1","resolved": "https://registry.npmjs.org/exit-on-epipe/-/exit-on-epipe-1.0.1.tgz","integrity": "sha512-h2z5mrROTxce56S+pnvAV890uu7ls7f1kEvVGJbw1OlFH3/mlJ5bkXu0KRyW94v37zzHPiUd55iLn3DA7TjWpw=="},"frac": {"version": "1.1.2","resolved": "https://registry.npmjs.org/frac/-/frac-1.1.2.tgz","integrity": "sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA=="},"minimist": {"version": "1.2.8","resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz","integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA=="},"node-xlsx": {"version": "0.17.2","resolved": "https://registry.npmjs.org/node-xlsx/-/node-xlsx-0.17.2.tgz","integrity": "sha512-j92dGS8KvGPi6YpYovHrR9zWiyDONx7DiGhl1SjM+vzxAh3do6hmerFCyN+hRuK7QhwHdwzfpYxZm+hKA/uErA==","requires": {"@babel/runtime": "^7.15.4","buffer-from": "^1.1.2","xlsx": "^0.17.2"}},"printj": {"version": "1.1.2","resolved": "https://registry.npmjs.org/printj/-/printj-1.1.2.tgz","integrity": "sha512-zA2SmoLaxZyArQTOPj5LXecR+RagfPSU5Kw1qP+jkWeNlrq+eJZyY2oS68SU1Z/7/myXM4lo9716laOFAVStCQ=="},"regenerator-runtime": {"version": "0.14.1","resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz","integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="},"ssf": {"version": "0.11.2","resolved": "https://registry.npmjs.org/ssf/-/ssf-0.11.2.tgz","integrity": "sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==","requires": {"frac": "~1.1.2"}},"wmf": {"version": "1.0.2","resolved": "https://registry.npmjs.org/wmf/-/wmf-1.0.2.tgz","integrity": "sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw=="},"word": {"version": "0.3.0","resolved": "https://registry.npmjs.org/word/-/word-0.3.0.tgz","integrity": "sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA=="},"xlsx": {"version": "0.17.5","resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.17.5.tgz","integrity": "sha512-lXNU0TuYsvElzvtI6O7WIVb9Zar1XYw7Xb3VAx2wn8N/n0whBYrCnHMxtFyIiUU1Wjf09WzmLALDfBO5PqTb1g==","requires": {"adler-32": "~1.2.0","cfb": "^1.1.4","codepage": "~1.15.0","crc-32": "~1.2.0","ssf": "~0.11.2","wmf": "~1.0.1","word": "~0.3.0"}}}
}

4、在lang文件夹下，新建文档命名：package.json

package.json文档代码如下

{"name": "app","version": "1.0.0","lockfileVersion": 1,"requires": true,"dependencies": {"@babel/runtime": {"version": "7.24.7","resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.7.tgz","integrity": "sha512-UwgBRMjJP+xv857DCngvqXI3Iq6J4v0wXmwc6sapg+zyhbwmQX67LUEFrkK5tbyJ30jGuG3ZvWpBiB9LCy1kWw==","requires": {"regenerator-runtime": "^0.14.0"}},"adler-32": {"version": "1.2.0","resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.2.0.tgz","integrity": "sha512-/vUqU/UY4MVeFsg+SsK6c+/05RZXIHZMGJA+PX5JyWI0ZRcBpupnRuPLU/NXXoFwMYCPCoxIfElM2eS+DUXCqQ==","requires": {"exit-on-epipe": "~1.0.1","printj": "~1.1.0"}},"babel-plugin-transform-remove-console": {"version": "6.9.4","resolved": "https://registry.npmjs.org/babel-plugin-transform-remove-console/-/babel-plugin-transform-remove-console-6.9.4.tgz","integrity": "sha512-88blrUrMX3SPiGkT1GnvVY8E/7A+k6oj3MNvUtTIxJflFzXTw1bHkuJ/y039ouhFMp2prRn5cQGzokViYi1dsg==","dev": true},"buffer-from": {"version": "1.1.2","resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz","integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ=="},"cfb": {"version": "1.2.2","resolved": "https://registry.npmjs.org/cfb/-/cfb-1.2.2.tgz","integrity": "sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==","requires": {"adler-32": "~1.3.0","crc-32": "~1.2.0"},"dependencies": {"adler-32": {"version": "1.3.1","resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.3.1.tgz","integrity": "sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A=="}}},"codepage": {"version": "1.15.0","resolved": "https://registry.npmjs.org/codepage/-/codepage-1.15.0.tgz","integrity": "sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA=="},"crc-32": {"version": "1.2.2","resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz","integrity": "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ=="},"exit-on-epipe": {"version": "1.0.1","resolved": "https://registry.npmjs.org/exit-on-epipe/-/exit-on-epipe-1.0.1.tgz","integrity": "sha512-h2z5mrROTxce56S+pnvAV890uu7ls7f1kEvVGJbw1OlFH3/mlJ5bkXu0KRyW94v37zzHPiUd55iLn3DA7TjWpw=="},"frac": {"version": "1.1.2","resolved": "https://registry.npmjs.org/frac/-/frac-1.1.2.tgz","integrity": "sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA=="},"minimist": {"version": "1.2.8","resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz","integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA=="},"node-xlsx": {"version": "0.17.2","resolved": "https://registry.npmjs.org/node-xlsx/-/node-xlsx-0.17.2.tgz","integrity": "sha512-j92dGS8KvGPi6YpYovHrR9zWiyDONx7DiGhl1SjM+vzxAh3do6hmerFCyN+hRuK7QhwHdwzfpYxZm+hKA/uErA==","requires": {"@babel/runtime": "^7.15.4","buffer-from": "^1.1.2","xlsx": "^0.17.2"}},"printj": {"version": "1.1.2","resolved": "https://registry.npmjs.org/printj/-/printj-1.1.2.tgz","integrity": "sha512-zA2SmoLaxZyArQTOPj5LXecR+RagfPSU5Kw1qP+jkWeNlrq+eJZyY2oS68SU1Z/7/myXM4lo9716laOFAVStCQ=="},"regenerator-runtime": {"version": "0.14.1","resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz","integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="},"ssf": {"version": "0.11.2","resolved": "https://registry.npmjs.org/ssf/-/ssf-0.11.2.tgz","integrity": "sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==","requires": {"frac": "~1.1.2"}},"wmf": {"version": "1.0.2","resolved": "https://registry.npmjs.org/wmf/-/wmf-1.0.2.tgz","integrity": "sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw=="},"word": {"version": "0.3.0","resolved": "https://registry.npmjs.org/word/-/word-0.3.0.tgz","integrity": "sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA=="},"xlsx": {"version": "0.17.5","resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.17.5.tgz","integrity": "sha512-lXNU0TuYsvElzvtI6O7WIVb9Zar1XYw7Xb3VAx2wn8N/n0whBYrCnHMxtFyIiUU1Wjf09WzmLALDfBO5PqTb1g==","requires": {"adler-32": "~1.2.0","cfb": "^1.1.4","codepage": "~1.15.0","crc-32": "~1.2.0","ssf": "~0.11.2","wmf": "~1.0.1","word": "~0.3.0"}}}
}

5、在lang文件夹下，新建文档命名：app.js

app.js文档代码如下

import { createRequire } from "module";const require = createRequire(import.meta.url);
var path = require("path");
var fs = require("fs");
var xlsx = require("node-xlsx").default;
const TABLE_KEY = "lang_key";
var _OutputPath = "../../src/lang/";function isExits(path) {try {fs.statSync(path);return true;} catch (e) {return false;}
}function loopSheet(data) {if (data) {let _myData = {};let _myIndex = {};//解析表头while (data.length > 0) {const _rData = data.shift();if (_rData.length > 0) {if (_rData[0] == TABLE_KEY) {let len = _rData.length > 4 ? 4 : _rData.length; // 这里数字表示要生产几个文件, 3表示生产两种多语言，假设4，便是生产3种多语言for (let index = 1; index < len; index++) {const element = _rData[index];_myData[element] = {};_myIndex[element] = index;}break;}}}console.log("====================================");console.log("语言结构:", _myIndex);console.log("语言结构:", _myData);console.log("====================================");let _keys1 = Object.keys(_myData);let _keys2 = Object.keys(_myIndex);//确保结构是对称的if (_keys1.length > 0 &&_keys2.length > 0 &&_keys1.length == _keys2.length) {//TODO:做数据的遍历、存储到需要的位置for (let row = 0; row < data.length; row++) {const _rData = data[row];for (const key in _myIndex) {if (_myIndex.hasOwnProperty(key)) {const _keyIndex = _myIndex[key];_myData[key][_rData[0]] = _rData[_keyIndex];}}}}console.log("====================================");console.log("数据汇总:", _myData);console.log("====================================");//写出文件for (const key in _myData) {if (_myData.hasOwnProperty(key)) {const _sheetData = _myData[key];let _file = _OutputPath + key + ".ts";let str ="const " +key +" = " +JSON.stringify(_sheetData, null, "\t") +";\n";str += "export default " + key + ";";fs.writeFile(_file, str, function (err) {if (err) {res.status(500).send("Server is error...");}});}}}
}function parse(path) {let _isFile = isExits(path);if (_isFile) {// var arr = path.split("/");// delete arr[arr.length - 1];// _OutputPath = arr.join("/");console.log("====================================");console.log("_OutputPath:", _OutputPath);console.log("====================================");const workSheetsFromFile = xlsx.parse(path);if (workSheetsFromFile) {for (let index = 0; index < workSheetsFromFile.length; index++) {const sheet = workSheetsFromFile[index];console.log("====================================");console.log(sheet.name);console.log("====================================");loopSheet(sheet.data);}} else {console.log("====================================");console.log("文件出错！");console.log("====================================");}} else {console.log("====================================");console.log("文件不存在！");console.log("====================================");}
}parse(process.argv[2]);

6、确认在src目录下有一个文件夹名字为lang 如下图

没有就必须创建文件夹名字为lang