vue項目如何實現國際化？分享一下基于vue-i18n實現國際化的經驗

（1）安裝

npm install vue-i18n --save

---

（2）配置main.js

main.js文件的配置，在main.js中添加以下跟vue-i18n的使用有關的配置項

main.js文件

import "ant-design-vue/dist/antd.css"; import "@/renderer/assets/global.scss";import Vue from "vue"; import App from "./App.vue"; import router from "./router/router"; import store from "./store/index.js"; import VueI18n from "vue-i18n"; import VueElectron from "vue-electron"; import { errorCaptured } from "./utils/assist";import "./plugins/andt-design-vue"; import "./plugins/vue-lazyload";Vue.prototype.$errorCaptured = errorCaptured; // if (!process.env.IS_WEB) Vue.use(VueElectron);Vue.config.productionTip = false; Vue.use(VueI18n);const i18n = new VueI18n({locale: "zh", //切換語言messages: {zh: require("./language/language-zh.js"),en: require("./language/language-en.js")} });new Vue({router,store,i18n,render: h => h(App) }).$mount("#app");

---

（3）配置語言文件

language-en.js

export const lang = {home: "home",name: "chinese",otherWay: "Other ways to log in",clickAvatar: "Click avatar log in",nextLogin: "Next Automatic Login",accountLogin: "Account Login",switchLanguage: "switch language",maintainSteam: "Please keep steam logged in",scanSuccess: "Scan success",phoneConfirmation: "Please confirm on your phone",returnQRcode: "Return to QR code",anonymousUser: "Anonymous user" };

language-zh.js

export const lang = {home: "首頁",name: "中文",otherWay: "其它方式登錄",clickAvatar: "點擊頭像登錄",nextLogin: "下次自動登錄",accountLogin: "賬號登錄",switchLanguage: "切換語言",maintainSteam: "請保持STEAM登錄",scanSuccess: "掃描成功",phoneConfirmation: "請在手機上確認登錄",returnQRcode: "返回二維碼",anonymousUser: "匿名用戶" };

---

(4)在組件中使用

html

<div class="page-login-container"><div class="login-box" ><div class="not-me" @click="loginType"><div>{{ $t("lang.otherWay") }}</div></div></div></div><div class="test-drag"><a-button class="test-button" type="primary" @click="changeLaguages">{{$t("lang.switchLanguage")}}</a-button></div>

---

js

data: function() {return {lang: "zh",};},methods: {changeLaguages() {let lang = this.$i18n.locale === "zh" ? "en" : "zh";this.$i18n.locale = lang;} }

總結

以上是生活随笔為你收集整理的vue国际化配置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。