官网文档:

https://kazupon.github.io/vue-i18n/zh/

安装:

  1. yarn add vue-i18n

编写i18n文件

  1. // i18n/lang/cn.js
  2. export default {
  3.   com_btn: {
  4.     login: '登录',
  5.     edit: '编辑',
  6.     del: '确认删除？'
  7.   },
  8.   sayHi: '你好{arg}! 很高兴认识你'
  9. }
  1. // i18n/lang/en.js
  2. export default {
  3.   com_btn: {
  4.     login: 'Login',
  5.     edit: 'Edit',
  6.     del: 'isDel'
  7.   },
  8.   sayHi: 'hello {arg}! nice to meet you'
  9. }
  1. // i18n/index.js
  3. import Vue from 'vue'
  4. import VueI18n from 'vue-i18n'
  5. Vue.use(VueI18n)
  7. const i18n = new VueI18n({
  8.   local: 'cn',
  9.   messages: {}
  10. })
  12. Vue.prototype.$loadLanguage = lang => {
  13.   import(`@/i18n/lang/${lang}`).then(messages => {
  14.     i18n.setLocaleMessage(lang, messages.default)
  15.     i18n.locale = lang
  16.     return lang
  17.   })
  18. }
  20. export default i18n

引入i18n到项目

  1. // 项目/src/main.js
  2. import i18n from '@/i18n'
  4. new Vue({
  5.   i18n,
  6.   router,
  7.   store,
  8.   beforeCreate() {
  9.     this.$loadLanguage('en')
  10.   },
  11.   render: h => h(App)
  12. }).$mount('#app')

项目基本使用

  1. 文本使用
  2. 组件props使用
  3. js使用
  4. 传参使用 ```vue 

  1. <a name="UbX7d"></a>
  2. ### 便捷开发vscode插件i18n Ally
  4. 1. 安装i18n Ally
  5. 1. 项目配置
  6. ```json
  7. // settings.json  vscode配置
  8. {
  9.     // 国际化 i18n
  10.     // 匹配语言包路径
  11.     "i18n-ally.localesPaths": [
  12.         "src/i18n",
  13.         "src/i18n/lang"
  14.     ],
  15.     // 启用的框架
  16.     "i18n-ally.enabledFrameworks": [
  17.         "vue"
  18.     ],
  19.     "i18n-ally.enabledParsers": [
  20.         "js"
  21.     ],
  22.     "i18n-ally.fullReloadOnChanged": true,
  23.     // 文件
  24.     "i18n-ally.pathMatcher": "lang/{locale}.js",
  25.     "i18n-ally.dirStructure": "file",
  26.     "i18n-ally.keystyle": "nested",
  27.     // 需要显示的语言包
  28.     "i18n-ally.displayLanguage": "cn",
  29. }

插件使用

i18n教程.gif