vue 國(guó)際化i18n 多語(yǔ)言切換

tuomao 發(fā)布于2019-04-23 13:19 / 1157人閱讀

摘要：如果對(duì)您有幫助請(qǐng)動(dòng)動(dòng)鼠標(biāo)右下方給我來(lái)個(gè)贊，您的支持是我最大的動(dòng)力。

安裝

npm install vue-i18n

新建一個(gè)文件夾 i18n ，內(nèi)新建 en.js zh.js index.js 三個(gè)文件

準(zhǔn)備翻譯信息

en.js

export default {
  home: {
    helloworld: "hello workd ！"
  }
};

zh.js

export default {
  home: {
    helloworld: "你好世界"
  }
};

index.js

創(chuàng)建Vue-i18n實(shí)例

import Vue from "vue";
import VueI18n from "vue-i18n";
import enLocale from "./en";
import zhLocale from "./zh";

Vue.use(VueI18n);
const i18n = new VueI18n({
  locale: localStorage.lang || "zh",
  messages: {
    en: {
      ...enLocale
    },
    zh: {
      ...zhLocale
    }
  }
});
export default i18n;

i18n 掛載到 vue 根實(shí)例

main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import i18n from "./assets/i18n/index";

Vue.config.productionTip = false;

Vue.prototype.$i18n = i18n;

new Vue({
  router,
  store,
  i18n,
  render: h => h(App)
}).$mount("#app");

簡(jiǎn)單的使用

about.vue

注意：

比如說(shuō)上面的hi 你要通過(guò)這種形式來(lái)寫(xiě)的時(shí)候，不能放在data 里面，因?yàn)楫?dāng)語(yǔ)言切換的時(shí)候他是不會(huì)變的，要寫(xiě)在computed內(nèi)

此隨筆乃本人學(xué)習(xí)工作記錄，如有疑問(wèn)歡迎在下面評(píng)論，轉(zhuǎn)載請(qǐng)標(biāo)明出處。

如果對(duì)您有幫助請(qǐng)動(dòng)動(dòng)鼠標(biāo)右下方給我來(lái)個(gè)贊，您的支持是我最大的動(dòng)力。

GPU云服務(wù)器云服務(wù)器多語(yǔ)言多語(yǔ)言對(duì)應(yīng) 多語(yǔ)言商城網(wǎng)站多語(yǔ)言

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/1720.html

相關(guān)文章

編寫(xiě)簡(jiǎn)單i18n庫(kù)

摘要：因?yàn)閮纱蔚拈_(kāi)發(fā)維護(hù)體驗(yàn)產(chǎn)生了對(duì)比，使我產(chǎn)生了不小的興趣假設(shè)一個(gè)簡(jiǎn)單的頁(yè)面需要多語(yǔ)言。兩個(gè)簡(jiǎn)單的區(qū)別就是和替換的區(qū)別。樣式模式其實(shí)就是簡(jiǎn)單的切換。當(dāng)修改的某個(gè)值時(shí)，會(huì)觸發(fā)對(duì)應(yīng)的，并發(fā)射信號(hào)通知節(jié)點(diǎn)去更新。 i18n是什么？i18n（其來(lái)源是英文單詞internationalization的首末字符i和n，18為中間的字符數(shù)）是國(guó)際化的簡(jiǎn)稱。前言第一次接觸多語(yǔ)言是用野生javascri...

txgcwm 2019-08-26 11:46 評(píng)論0 收藏0
編寫(xiě)簡(jiǎn)單i18n庫(kù)

摘要：因?yàn)閮纱蔚拈_(kāi)發(fā)維護(hù)體驗(yàn)產(chǎn)生了對(duì)比，使我產(chǎn)生了不小的興趣假設(shè)一個(gè)簡(jiǎn)單的頁(yè)面需要多語(yǔ)言。兩個(gè)簡(jiǎn)單的區(qū)別就是和替換的區(qū)別。樣式模式其實(shí)就是簡(jiǎn)單的切換。當(dāng)修改的某個(gè)值時(shí)，會(huì)觸發(fā)對(duì)應(yīng)的，并發(fā)射信號(hào)通知節(jié)點(diǎn)去更新。 i18n是什么？i18n（其來(lái)源是英文單詞internationalization的首末字符i和n，18為中間的字符數(shù)）是國(guó)際化的簡(jiǎn)稱。前言第一次接觸多語(yǔ)言是用野生javascri...

DevWiki 2019-08-01 18:35 評(píng)論0 收藏0
vue-i18n和elementUI實(shí)現(xiàn)國(guó)際化

摘要：為了滿足很多公司都已經(jīng)向方向發(fā)展顧使用多語(yǔ)言的網(wǎng)站已經(jīng)太普遍了所以是使用和實(shí)現(xiàn)國(guó)際化接下來(lái)我會(huì)盡量寫(xiě)的詳細(xì)一點(diǎn)的內(nèi)容個(gè)人覺(jué)得的應(yīng)該寫(xiě)得清楚一些安裝所需要用到的東西安裝安裝創(chuàng)建目錄編寫(xiě)所需要用到的語(yǔ)言我只寫(xiě)了中文和英文歡迎來(lái)到我為了滿足很多公司都已經(jīng)向international方向發(fā)展,顧使用多語(yǔ)言的網(wǎng)站已經(jīng)太普遍了, 所以是使用vue-i18n和elementUI實(shí)現(xiàn)國(guó)際化.接下來(lái)我...

_ang 2019-08-22 18:14 評(píng)論0 收藏0
vue-i18n結(jié)合Element-ui的配置

摘要：官網(wǎng)已經(jīng)做了詳細(xì)介紹，這里依葫蘆畫(huà)瓢跟著實(shí)現(xiàn)一下為了實(shí)現(xiàn)插件的多語(yǔ)言切換按照如上把國(guó)際化文件都整合到一起，避免中大段引入相關(guān)代碼。使用方法：在配合 Element-UI 一起使用時(shí)，會(huì)有2個(gè)問(wèn)題： ####（1）、頁(yè)面刷新后，通過(guò)按鈕切換的語(yǔ)言還原成了最初的語(yǔ)言，無(wú)法保存 ####（2）、框架內(nèi)部自帶的提示文字無(wú)法更改，比如像時(shí)間選擇框內(nèi)部中的提示文字關(guān)于第一個(gè)問(wèn)題，可以在初始化...

孫淑建 2019-08-26 13:51 評(píng)論0 收藏0
如何讓一個(gè)vue項(xiàng)目支持多語(yǔ)言（vue-i18n）

摘要：引入是一個(gè)插件，主要作用就是讓項(xiàng)目支持國(guó)際化多語(yǔ)言。所以新建一個(gè)文件夾，存放所有跟多語(yǔ)言相關(guān)的代碼。目前包含三個(gè)文件。全局搜索發(fā)現(xiàn)一共有多個(gè)。這兩天手頭的一個(gè)任務(wù)是給一個(gè)五六年的老項(xiàng)目添加多語(yǔ)言。這個(gè)項(xiàng)目龐大且復(fù)雜，早期是用jQuery實(shí)現(xiàn)的，兩年前引入Vue并逐漸用組件替換了之前的Mustache風(fēng)格模板。要添加多語(yǔ)言，不可避免存在很多文本替換的工作，這么龐雜的一個(gè)項(xiàng)目，怎么才能使...

wuyumin 2019-08-22 17:31 評(píng)論0 收藏0