vue 國際化i18n 多語言切換

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

摘要：如果對您有幫助請動動鼠標(biāo)右下方給我來個贊，您的支持是我最大的動力。

安裝

npm install vue-i18n

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

準(zhǔn)備翻譯信息

en.js

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

zh.js

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

index.js

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

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 根實例

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");

簡單的使用

about.vue

注意：

比如說上面的hi 你要通過這種形式來寫的時候，不能放在data 里面，因為當(dāng)語言切換的時候他是不會變的，要寫在computed內(nèi)

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

如果對您有幫助請動動鼠標(biāo)右下方給我來個贊，您的支持是我最大的動力。

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/1720.html

相關(guān)文章

編寫簡單i18n庫

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

txgcwm 2019-08-26 11:46 評論0 收藏0
編寫簡單i18n庫

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

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

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

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

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

孫淑建 2019-08-26 13:51 評論0 收藏0
如何讓一個vue項目支持多語言（vue-i18n）

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

wuyumin 2019-08-22 17:31 評論0 收藏0