vue2使用国际化vue-i18n详解+ES6的import和export区别

1.安装vue-i18n：

npm install vue-i18n@6 -s  
坑大了，我用vue2写一开始没考虑到兼容性，直接npm i vue-i18n装了最新的9.2.2版本的,装完控制台有
兼容性警告，说9.2只适用于vue3，但我没注意到，就一直出错，很奇怪，人麻了，后面重新安装
才注意到那句警告的话
1
2
3
4

所以以后安装第三方模块（包）还是要认真看控制台给出的警告，要不然踩坑直接怀疑自己哈哈

当然你也可以这样：

<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
1

2.项目配置vue-i18n：
在src目录下创建i18n文件夹，在i18n文件夹内添加基础配置及各语言文本配置文件；

在index.js进行如下设置：

import Vue from 'vue';
import VueI18n from 'vue-i18n';
Vue.use(VueI18n);
// 引入各个语言配置文件
import zh from './config/zh';
import en from './config/en';
// 创建vue-i18n实例i18n
const i18n = new VueI18n({
    // 设置默认语言
    locale: localStorage.getItem('locale') || 'zh', // 语言标识,页面对应显示相同的语言
    // 添加多语言（每一个语言标示对应一个语言文件）
    messages: {
        zh,
        en,
    }
})
// 暴露i18n
export default i18n;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

在各个语言配置文件中设置对应语言文案。注意：也就是说将页面中所有的文字都做成相应的语言的文件

//zh.js
const zh = {
    name: '姓名',
    info: {
        sex: '男'
    }
}
export default zh;
1
2
3
4
5
6
7
8

//en.js
const en = {
    name: 'name',
    info: {
        sex: 'male'
    }
}
export default en;
1
2
3
4
5
6
7
8

最后在外层main.js引入i18n，并挂载至vue实例：

import Vue from 'vue';
import App from './App.vue';
/**
 * 引入i18n国际化
 */
import i18n from './i18n/index'; 
 
Vue.config.productionTio = false; 
 
new Vue({
  el: '#app',
  i18n, //创建根实例时，带上参数i18n
  render: h => h(App)
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14

3.项目使用：通过$t()方法

<p>{{$t("name")}}</p>
<p>{{$t("info.sex")}}</p>
<span v-text="$t('index')"></span>
1
2
3

4.修改语言：this.$i18n.locale = 语言编码; 这句是关键

vue中 .native修饰符： 可以在某个组件的根元素上监听一个原生事件。
通俗点讲：就是在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签，不加. native事件是无法触发的

<template>
    <div id="test-ka">
        <h3>{{lan}}</h3>
        <p>{{$t("name")}}</p>
        <p>{{$t("info.sex")}}</p>
        <p>
            <button @click="changeType('zh')">切换中文</button>
            <button @click="changeType('en')">切换英文</button>
        </p>
    </div>
</template>
<script>

export default {
    date() {
        return {
          lan:""
        }
    },
     beforeCreate() {
      console.log(this.$i18n.locale ); //zh
      console.log( localStorage.getItem('locale')); //zh
    },
    created() {
      this.lan=this.$i18n.locale  //$i18n在实例刚创建完成就有了，这不是$el要在mounted时才能取到
      console.log(this.$i18n.locale ); //zh
      console.log( localStorage.getItem('locale')); //zh
    },
   
    methods:{
        changeType(type){
// 此处做了语言选择记录，存在localStorage中，这里的作用只有一个当我重新请求页面
//的时候先取localStorage的记录值
            localStorage.setItem('locale',type)
            this.$i18n.locale = type; // 修改页面需要显示的语言
            this.lan=this.$i18n.locale
        }
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

vue-i18n的原理：
首先，引入VueI18n，然后注册到Vue中。

Vue.use(VueI18n)
1

注册的过程，会执行一段代码：

Object.defineProperty(Vue.prototype, '$i18n', {
      get () { return this._i18n }
})
1
2
3

最开始this._i18n是没有赋值的，上述代码只是简单对数据劫持监听。

beforeCreate: function beforeCreate () {
  var options = this.$options;
  options.i18n = options.i18n || (options.__i18n ? {} : null);

  if (options.i18n) {
    
  } else if (this.$root && this.$root.$i18n && this.$root.$i18n instanceof VueI18n) {
    // root i18n  根vue实例
    this._i18n = this.$root.$i18n;
    this._i18n.subscribeDataChanging(this);
    this._subscribing = true;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

可以看到，以options为判断，最开始取值取的是options.i18n，而这个值并不存在，但是，在根实例this.$root中，i18n是存在的。

因为在创建根实例时，带上了参数i18n。

new Vue({
  el: '#app',
  i18n,  // 我在这里
  render: h => h(App)
})
1
2
3
4
5

切换语言后，i18n是怎样起作用的？需要运行代码：

this.$i18n.locale = lang
1

然后在Vuei18n中，有一个监听local的方法

watchLocale (): ?Function {
    /* istanbul ignore if */
    if (!this._sync || !this._root) { return null }
    const target: any = this._vm // vue 实例
    return this._root.$i18n.vm.$watch('locale', (val) => {
      // 重新对 locale 赋值
      target.$set(target, 'locale', val) 
      // 迫使 Vue 实例重新渲染
      target.$forceUpdate() 
    }, { immediate: true })
  }
1
2
3
4
5
6
7
8
9
10
11

可以看到，当local改变的时候，会用forceUpdate方法强制Vue重新渲染页面。
$forceUpdate()：这是vue的一个方法，是强制更新的意思，更新视图和数据，触发updated生命周期。

参考了这篇文章
参考了这篇文章
i18n的原理参考这篇文章

附：
用vue脚手架创建项目时虽然vue create prejectName是脚手架3的写法，但你用这个命令创建不代表你安装的是脚手架3，你的脚手架是已经被全局安装过了，cmd可以查到对应的版本，所以你安装的就是cmd查到的对应的版本。后面安装过程中让你选vue2.0或者vue3.0指的就是vue语法了

//vue可以配置import导入用@替换相应的路径而不考虑层级
import {i18n} from "@/i18n" //vue有时候用@表示路径，默认只表示.,但正常在vue.config.js中重新配置

//vue.config.js
const path = require('path')
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src') //即@代表src，还可以配置其他符号来代表其他路径
      }
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

ES6的import和export区别：

export const def=function(){}  //必须声明变量，不能把const去掉，而一旦声明变量就只能export，不能export default，语法不支持

import * as mod from "./utils.js"; //直接导出的可以用*作为模块导入

console.log(mod.def); 
或者  import {def} from "./utils.js" //解构赋值，因为不是默认导出，只能解构对应
1
2
3
4
5
6

export default function（）{} //默认导出的
import obser from "./observe.js"; //导入可以任意命名
或者 
import *as modobser from "./observe.js"; //用as作为模块导入
console.log(modobser.default); //只不过要这样取结果
1
2
3
4
5

总结：
export default和export 都可以用* as作为模块导入，同时export导出还能用解构赋值import，而 export default还可以任意命名import