vue 國際化i18n 多語言切換

tuomao 發布于2019-04-23 13:19 / 1085人閱讀

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

安裝

npm install vue-i18n

新建一個文件夾 i18n ，內新建 en.js zh.js index.js 三個文件

準備翻譯信息

en.js

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

zh.js

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

index.js

創建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 里面，因為當語言切換的時候他是不會變的，要寫在computed內

此隨筆乃本人學習工作記錄，如有疑問歡迎在下面評論，轉載請標明出處。

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

GPU云服務器云服務器多語言多語言對應多語言商城網站多語言

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1720.html

編寫簡單i18n庫

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

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

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

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

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

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

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

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

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

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