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，但我没注意到，就一直出错，很奇怪，人麻了，后面重新安装
才注意到那句警告的话

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

当然你也可以这样：

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

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;

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

//zh.js
const zh = {name: '姓名',info: {sex: '男'}
}
export default zh;

//en.js
const en = {name: 'name',info: {sex: 'male'}
}
export default en;

最后在外层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, //创建根实例时，带上参数i18nrender: h => h(App)
});

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

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

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 ); //zhconsole.log( localStorage.getItem('locale')); //zh},created() {this.lan=this.$i18n.locale  //$i18n在实例刚创建完成就有了，这不是$el要在mounted时才能取到console.log(this.$i18n.locale ); //zhconsole.log( localStorage.getItem('locale')); //zh},methods:{changeType(type){// 此处做了语言选择记录，存在localStorage中，这里的作用只有一个当我重新请求页面
//的时候先取localStorage的记录值localStorage.setItem('locale',type)this.$i18n.locale = type; // 修改页面需要显示的语言this.lan=this.$i18n.locale}}
}
</script>

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

Vue.use(VueI18n)

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

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

最开始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;}
}

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

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

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

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

this.$i18n.locale = lang

然后在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 })}

可以看到，当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，还可以配置其他符号来代表其他路径}}}
}

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" //解构赋值，因为不是默认导出，只能解构对应

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

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

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

Vue实例详解与生命周期
Vue实例详解与生命周期 http://www.jianshu.com/p/b5858f1e6e76 Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理. ...
Vue中 Vue.prototype 详解及使用——作用：避免和已被定义的数据、方法、计算属性产生冲突
Vue中 Vue.prototype 详解及使用--作用:避免和已被定义的数据.方法.计算属性产生冲突 **应用场景:**在很多组件里用到数据/实用工具,但是不想污染全局作用域.这种情况下,可以通过在 ...
七、Vue cli详解学习笔记——什么是Vue cli ,Vue cli的使用（安装，拉取2.x模板，初始化项目），Vue cli2详解，Runtime-Compiler和Runtime-only区别
一.什么是Vue CLI 如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI. 如果你在开发大型项目, 那么你需要, 并且必然需要使用Vue CLI 使用Vue.js开发大型应用时 ...
Linux运行脚手架vue,Linux Nodejs与vue脚手架详解
本篇教程介绍了Linux Nodejs与vue脚手架详解,希望阅读本篇文章以后大家有所收获,帮助大家对Node.js的理解更加深入. < https://nodejs.org/dist/v8.9 ...
vue路由详解 --基础
vue路由详解 --基础 1.router-link 和router-view组件 router-link相当于封装了一个a标签 router-view为组件显示的位置 <router-link ...
Electron vue使用详解
Electron vue使用详解 Electron是什么? Electron 是一个框架,可以让您使用 JavaScript, HTML 和 CSS 创建桌面应用程序. 然后这些应用程序可以打包在m ...
findindex遍历 js_详解ES6数组方法find()、findIndex()的总结
本文主要讲解ES6数组方法find()与findIndex(),关于JS的更多数组方法,可参考以下: 1. find() 该方法主要应用于查找第一个符合条件的数组元素,即返回通过测试(函数内判断)的数 ...
【Vue组件详解（一）】
Vue组件详解(一) 简介对组件的理解传统方式编写页面组件方式编写页面非单文件组件完整代码总结简介组件的定义其实就是实现应用中局部功能代码(html,css,js)和资源(MP3 ,M ...
[CSS]详解display:inline | block |inline-block的区别
2019独角兽企业重金招聘Python工程师标准>>> [CSS]详解display:inline | block |inline-block的区别[点评网站][发布新闻][申请专栏 ...

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

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

最新文章

热门文章