vue-i18n:
安裝:npm install vue-i18n
在main.js同級建i18n資料夾,並裡面建i18n.js、langs資料夾,langs資料夾下建en.js、cn.js
目錄如下:
.
├── assets
│ └── logo.png
├── components
│ └── helloworld.vue
├── i18n
│ ├── i18n.js
│ └── langs
│ ├── cn.js
│ ├── en.js
│ └── index.js
├── main.js
└── store.js
import vue from 'vue'
import vuei18n from 'vue-i18n'
import messages from './langs'
vue.use(vuei18n)
const i18n = new vuei18n()
export default i18n
//langs/index.js
import en from './en'
import cn from './cn'
export default
const en =
}export default en
const cn =
}export default cn
接下來是在頁面中使用、切換語言。import vue from 'vue'
import store from './store'
import i18n from './i18n/i18n'
vue.config.productiontip = false
store,
i18n,
//html:
} // hello, world
通過改變this.$i18n.locale的值就可以自動切換頁面的語言了//js切換語言
data()
},methods:
}
接下來是將elementui國際化,更改的地方不多,**如下
import vue from 'vue'
import locale from 'element-ui/lib/locale'
import vuei18n from 'vue-i18n'
import messages from './langs'
vue.use(vuei18n)
const i18n = new vuei18n()
locale.i18n((key, value) => i18n.t(key, value)) //重點:為了實現element外掛程式的多語言切換
export default i18n
import enlocale from 'element-ui/lib/locale/lang/en'
const en = ,
...enlocale
}export default en
main.js保持不變,現在切換中英文,elementui內部語言也會改變。import zhlocale from 'element-ui/lib/locale/lang/zh-cn'
const cn = ,
...zhlocale
}export default cn
vue i18n 用法及外掛程式值
npm install vue i18n import vuei18n from vue i18n importlangenfrom static en importlangzhchsfrom static zhchs vue.use vuei18n consti18n newvuei18n new...
vue cli專案中引入vue i18n
vue cli專案中引入vue i18n 安裝 npm install vue i18n可參考vue i18n官網文件 main.js中引入 import vue from vue import vuei18n from vue i18n vue.use vuei18n 配置語言包 main.js ...
語言國際化 vue i18n
安裝依賴包 npm i vue i18n s 在根目錄建立乙個 lang的資料夾,並且在lang資料夾內建立cn.js 和 en.js 開啟 main.js,注入vue例項中 import vue from vue import vuei18n from vue i18n 語言國際化 vue.use...