官网文档:

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
  2. import Vue from 'vue'
  3. import VueI18n from 'vue-i18n'
  4. Vue.use(VueI18n)
  5. const i18n = new VueI18n({
  6. local: 'cn',
  7. messages: {}
  8. })
  9. Vue.prototype.$loadLanguage = lang => {
  10. import(`@/i18n/lang/${lang}`).then(messages => {
  11. i18n.setLocaleMessage(lang, messages.default)
  12. i18n.locale = lang
  13. return lang
  14. })
  15. }
  16. export default i18n

引入i18n到项目

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

项目基本使用

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

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

插件使用

i18n教程.gif