[Vue3]i18n語系檔編譯後能修改
需求情境：由於專案編譯後到客戶端仍會微調字典檔內容，ex: 把字從 OK -> Login
但並不方便反覆編譯的情況，透過axios更新字典檔
環境 package.json中的版本:
“axios": “^1.4.0",
“vue": “^3.3.4",
“vue-i18n": “^9.2.2",
“vue-router": “^4.2.4"
專案結構
public
└ static
└ lang
└ en.json
└ tw.json
└ config.js
└ favicon.ico
└ index.html
src
└ api
└ assets
└ lang
└ index.js
└ store
└ views
└ login.vue
└ App.vue
└ main.js
└ router.js
babel.config.js
jsconfig.json
package.json
vue.config.js
調整預設語系
編譯後仍可修改
//config.js
window.g = {
language:'en',
}
初始化i18n
//main.js
import App from './App.vue'
import i18n from './lang'
app.use(i18n)
createApp(App).use(i18n).mount('#app')
語系字典檔
//en.json
{
"loginPage": {
"account": "Account",
"password": "Password",
"login": "Login"
}
}
//tw.json
{
"loginPage": {
"account": "帳號",
"password": "密碼",
"login": "登入"
}
}
i18n的設定
//lang/index.js
import { createI18n } from 'vue-i18n/dist/vue-i18n.cjs'
import tw from "../../public/static/lang/tw.json";
import en from '../../public/static/lang/en.json'
let i18n = createI18n({
legacy: false,
globalInjection: true, // 全局模式，可以直接使用 $t
locale: localStorage.getItem("language") ? localStorage.getItem("language") : window.g.language,
messages: {
en,
tw
}
})
export default i18n
自動取得最新版本的語系字典檔
//App.vue
<script>
import axios from "axios";
import i18n from "@/lang";
export default {
name: 'App',
setup(){
const netLink = window.location.href
const getLink = netLink.split("/#/") // router.js中設定 history:createWebHashHistory() 預設網址會有/#/
//中文
axios.get(getLink[0]+'/static/lang/tw.json').then(res=>{
i18n.global.setLocaleMessage('tw', res.data)
})
//英文
axios.get(getLink[0]+'/static/lang/en.json').then(res=>{
i18n.global.setLocaleMessage('en', res.data)
})
}
}
</script>
畫面上顯示文字
//login.vue
<div>{{ $t("loginPage.account") }}</div>
- 從en切換到tw
i18n.global.locale = 'tw’ - 刷新畫面
router.go(0) - 記住這次的變更
localStorage.setItem('language’, 'tw’)