vue中自定義設置多語言(包括使用vue-i18n),并且運行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

7、使用xlsx表格導出多語言文檔

xlsx表格也必須放在tools的lang目錄下,xlsx表格名字可以隨意命名,這里我命名為:TEXAS_i18n.xlsx

8、TEXAS_i18n.xlsx的書寫格式如下,這個格式是不可更改的,需要嚴格對應

9.運行這個腳本需要安裝node 確保電腦已經安裝好node, 建議是14版本以上

10,運行腳本,生成多語言,需要在tools的lang目錄運行

10.1先運行npm i

npm i

10.2.在運行

node .\app.js .\TEXAS_i18n.xlsx

如圖:

11、查看運行結果,你會發現,在src的lang目錄下,會生成三個文件

如果需要生成更多,請更改app,js文件個數,其他都不要改動就可

好了,編寫完成,有需要請自行查看!!!!!

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/diannao/42442.shtml
繁體地址,請注明出處:http://hk.pswp.cn/diannao/42442.shtml
英文地址,請注明出處:http://en.pswp.cn/diannao/42442.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

聊一下Maven打包的問題(jar要發布)

文章目錄 一、問題和現象二、解決方法&#xff08;1&#xff09;方法一、maven-jar-pluginmaven-dependency-plugin&#xff08;2&#xff09;方法二、maven-assembly-plugin 一、問題和現象 現在的開發一直都是用spring boot&#xff0c;突然有一天&#xff0c;要自己開發一個…

Django之項目開發(二)

目錄 一、安裝和使用uWSGI 1.1、安裝 1.2、配置文件 1.3、啟動與停止uwsgi 二、安裝nginx 三、Nginx 配置uWSGI 四、Nginx配置靜態文件 五、Nginx配置負載均衡 一、安裝和使用uWSGI uWSGI 是一個 Web 服務器,可以用來部署 Python Web 應用。它是一個高性能的通用的 We…

味蕾與理解:應對自閉癥兒童挑食的策略與理解

在星貝育園自閉癥康復學校&#xff0c;我們深知飲食習慣對孩子們的成長至關重要&#xff0c;而自閉癥兒童的挑食問題往往比同齡兒童更為突出&#xff0c;給家長和照顧者帶來了額外的挑戰。今天&#xff0c;作為這里的老師&#xff0c;我想與大家分享一些應對自閉癥兒童挑食的策…

(南京觀海微電子)——電阻應用及選取

什么是電阻&#xff1f; 電阻是描述導體導電性能的物理量&#xff0c;用R表示。 電阻由導體兩端的電壓U與通過導體的電流I的比值來定義&#xff0c;即&#xff1a; 所以&#xff0c;當導體兩端的電壓一定時&#xff0c;電阻愈大&#xff0c;通過的電流就愈小&#xff1b;反之&…

鴻蒙應用實踐:利用扣子API開發起床文案生成器

前言 扣子是一個新一代 AI 應用開發平臺&#xff0c;無需編程基礎即可快速搭建基于大模型的 Bot&#xff0c;并發布到各個渠道。平臺優勢包括無限拓展的能力集&#xff08;內置和自定義插件&#xff09;、豐富的數據源&#xff08;支持多種數據格式和上傳方式&#xff09;、持…

[Unity入門01] Unity基本操作

參考的傅老師的教程學了一下Unity的基礎操作&#xff1a; [傅老師/Unity教學] Unity3D基礎入門 [華梵大學] 遊戲引擎應用基礎(Unity版本) Class#01 移動&#xff1a;鼠標中鍵旋轉&#xff1a;鼠標右鍵放大&#xff1a;鼠標滾輪飛行模式&#xff1a;右鍵WASDQEFocus模式&…

算法設計與分析 實驗5 并查集法求圖論橋問題

目錄 一、實驗目的 二、問題描述 三、實驗要求 四、實驗內容 &#xff08;一&#xff09;基準算法 &#xff08;二&#xff09;高效算法 五、實驗結論 一、實驗目的 1. 掌握圖的連通性。 2. 掌握并查集的基本原理和應用。 二、問題描述 在圖論中&#xff0c;一條邊被稱…

基于Android Studio訂餐管理項目

目錄 項目介紹 圖片展示 運行環境 獲取方式 項目介紹 能夠實現登錄&#xff0c;注冊、首頁、訂餐、購物車&#xff0c;我的。 用戶注冊后&#xff0c;登陸客戶端即可完成訂餐、瀏覽菜譜等功能&#xff0c;點餐&#xff0c;加入購物車&#xff0c;結算&#xff0c;以及刪減…

【學習筆記】操作系統--萬字長文

計算機操作系統 文章目錄 計算機操作系統引言 操作系統基本概念第一章 引論目標和作用操作系統發展歷程單道批處理系統多道批處理系統分時系統實時系統 基本特征并發共享虛擬異步性&#xff08;不確定性&#xff09; 操作系統主要功能處理機管理內存管理設備管理文件管理 第二章…

python `queue` 模塊提供了同步的、線程安全的隊列類

在Python中&#xff0c;queue 模塊提供了同步的、線程安全的隊列類&#xff0c;這使得在多線程環境下共享數據變得簡單。下面是一個使用 queue.Queue 的并發編程示例&#xff0c;其中使用了 threading 模塊來創建多個線程&#xff0c;這些線程將向隊列中添加元素并從隊列中取出…

探索 WebKit 的前沿之旅:HTML5 新特性的卓越處理

探索 WebKit 的前沿之旅&#xff1a;HTML5 新特性的卓越處理 隨著 Web 技術的飛速發展&#xff0c;HTML5 已經成為構建現代網頁和應用的基石。WebKit&#xff0c;作為領先的瀏覽器引擎之一&#xff0c;承載著將這些創新技術轉化為用戶可感知體驗的使命。本文將深入探討 WebKit…

工程化:Commitlint / 規范化Git提交消息格式

一、理解Commitlint Commitlint是一個用于規范化Git提交消息格式的工具。它基于Node.js&#xff0c;通過一系列的規則來檢查Git提交信息的格式&#xff0c;確保它們遵循預定義的標準。 1.1、Commitlint的核心功能 代碼規則檢查&#xff1a;Commitlint基于代碼規則進行檢查&a…

匯聚榮拼多多電商的技巧有哪些?

在電商平臺上&#xff0c;匯聚榮拼多多以其獨特的商業模式和創新的營銷策略吸引了大量消費者。那么&#xff0c;如何在這樣一個競爭激烈的平臺上脫穎而出&#xff0c;成為銷售佼佼者呢?本文將深入探討匯聚榮拼多多電商的成功技巧。 一、精準定位目標客戶群體 首先&#xff0c;…

Python魔法函數(Magic Methods簡介

在 Python 中&#xff0c;魔法函數&#xff08;Magic Methods&#xff09;也稱為雙下劃線方法&#xff08;Dunder Methods&#xff09;&#xff0c;是指那些名字以雙下劃線開頭和結尾的特殊方法。 這些方法可以讓您的自定義類實現一些特定的行為&#xff0c;從而與 Python 的內…

絕區肆--2024 年AI安全狀況

前言 隨著人工智能系統變得越來越強大和普及&#xff0c;與之相關的安全問題也越來越多。讓我們來看看 2024 年人工智能安全的現狀——評估威脅、分析漏洞、審查有前景的防御策略&#xff0c;并推測這一關鍵領域的未來可能如何。 主要的人工智能安全威脅 人工智能系統和應用程…

Qt 繪圖詳解

文章目錄 頭文件和構造函數啟用反鋸齒功能繪制矩形繪制圓角矩形繪制橢圓繪制圓弧繪制弦繪制凸多邊形繪制圖片繪制直線繪制多條直線繪制多點連接的線繪制路徑繪制扇形繪制點繪制文本擦除矩形區域填充矩形填充路徑 頭文件和構造函數 #include "mainwindow.h" #include…

C-11 三角剖分的調研

C-11 三角剖分算法 三角剖分就是將輸入的多邊形&#xff0c;分割成一系列互不重疊的三角形&#xff0c;其重要性就在這不多贅述。這個是一個別人總結的鏈接&#xff1a;http://vterrain.org/Implementation/Libs/triangulate.html 圖片鏈接&#xff1a;http://www-cgrl.cs.m…

基于CentOS Stream 9平臺搭建MinIO以及開機自啟

1. 官網 https://min.io/download?licenseagpl&platformlinux 1.1 下載二進制包 指定目錄下載 cd /opt/coisini/ wget https://dl.min.io/server/minio/release/linux-amd64/minio1.2 文件賦權 chmod x /opt/coisini/minio1.3 創建Minio存儲數據目錄&#xff1a; mkdi…

springboot校園安全通事件報告小程序-計算機畢業設計源碼02445

Springboot 校園安全通事件報告小程序系統 摘 要 隨著中國經濟的飛速增長&#xff0c;消費者的智能化水平不斷提高&#xff0c;許多智能手機和相關的軟件正在得到更多的關注和支持。其中&#xff0c;校園安全通事件報告小程序系統更是深得消費者的喜愛&#xff0c;它的出現極大…

關于隱藏、覆蓋(重寫)、重載的理解

定義區分 在派生-對象中&#xff1a;優先考慮隱藏&#xff0c;此時派生類中的覆蓋(重寫)也是隱藏;沒有隱藏的情況下&#xff0c;子類對象才能調用父類重載函數。[此時感覺virtual沒用&#xff0c;]在派生-指針或者引用中&#xff1a;只用覆蓋(重寫)和重載; 注&#xff1a;C Pr…