數控系統解密

數控系統解密開始時候在網上搜羅一大堆的相關帖子,都是告訴你怎么用,卻不說一些細節要點,

導致后面安裝使用出現了一系列的錯誤浪費時間。特此記錄一下。

cnpm install vue-i18n //只適用于 vue2 的版本cnpm install vue-i18n@next // vue3 安裝這版

Vue3版 vue-i18n:傳送門>>>

二、使用方案
一、創建 i18n 文件夾,文件中包含三個文件。
1、index.js(主入口)

import { createI18n } from 'vue-i18n'import zh from './zh'import en from './en'const i18n = createI18n({   // 如果本地有語言標識就采用本地,沒有就根據瀏覽器語言默認標識顯示語言
  locale: localStorage.getItem('locale') || navigator.language.slice(0, 2),   messages:{
     zh,
     en
  }
});export default i18n;

2、zh.js(中文翻譯)

export default {  home:{    name:"首頁"
 }
}

3、en.js(英文翻譯)

export default {  home:{    name:"Home"
 }
}

4、在 main.js 中引入

import vueI18n from './i18n'const app = createApp(App);
app.use(vueI18n)
app.mount('#app')

5、在頁面中使用

<div>{{ $t('home.name') }}</div>

6、語言切換

//為什么要引入文件使用,而不是直接解構 Vue 原型上的 i18n 使用下面會說。import i18n from "@/i18n/index";function seleLanguage(index){  const idx = ['zh','en'][index] || 'zh';  localStorage.setItem("locale",idx);
 i18n.global.locale = idx;
}

三、注意要點
1、要安裝的是 vue-i18n@next 而不是 vue-i18n;
2、多語言根據環境應該是檢測地區 IP 段確定地區語言,但是圖方便就采用了瀏覽器語言標識。(暫時沒發現什么問題)
3、切換時經過測試,如果使用定義在 vue 原型上的 i18n 刷新后會經常性找不到,弄其它東西后再切換語言會失𒉰敗,故此直接引入 i18n 會更方便。