标签：lang vue 语言 js Vue i18n import
引入vue-i18n
vue-i18n 是一个vue插件，主要作用就是让项目支持国际化多语言。首先我们引入这个插件：
import Vue from 'vue'
import Vue18n from 'vue-i18n'
Vue.use(Vuei18n);vue插件的使用方法，通过全局方法Vue.use()使用插件。
插件通常会为Vue添加全局功能。插件的范围没有限制-一般有下面几种：添加全局方法或者属性；添加全局资源；指令/过滤器/过渡等；通过全局mixin方法添加一些组件选项；添加Vue实例方法，通过把它们添加到Vue.prototype上实现。
Vue.js的插件应当有一个公开方法install,通过代码可以更直观的看出插件提供的功能：
//1 添加全局方法或者属性
Vue.myGlobalMethod=function(){}
//2 添加全局资源
Vue.directive('my-directive',{
bind(el,binding,vnode,oldVnode){}
});
//3 注入组件
Vue.mixin({
created(){}
});
//4 添加实例发方法
Vue.prototype.$myMethods=function(methodOptions){}使用vue-i18n
<div id="app">{{$t("message.hello")}}</div>
import Vue from 'vue'
import VueI18n from 'vue-i18n'
const messages={
en:{message:{hello:'hello world'}},
cn:{message:{hello:'您好世界'}}
};
const i18n=new VueI18n({
locale:'en',
messages:messages
});
new Vue({i18n}).$mount("#app");
//output
<div id="app">hello world</div>
可以看到，我们再实例化Vue的时候，将i18n当作一个options传了进去。之后我们就可以在vue的组件里使用i18n了，使用方法主要是两种：
1 在组件的template中，使用$t()方法
2 在组件的script中，使用this.$i18n.$t()
添加locales文件夹
messages是一个包含了多语言的对象，它就像哦我们的字典。可以新建一个locales文件夹，存放作于跟我们语言相关的代码。目前包含三个文件:index.js en.js cn.js
en.js 和cn.js是我们的语言包，是一个json形式。
index.js
import Vue form 'vue'
import VueI18n from 'vue-i18n'
import EN from './en.js'
import CN from './cn.js'
const DEFAULT_LANG='cn';
const LOCALE_KEY='localeLanguage';
const locales={
en:EN,
cn:CN
};
const i18n=new VueI18n({
locale:DEFAULT_LANG,
messages:locales
});
export const setup
=(lang)=>{
if(lang==undefiend){
lang=window.getStorage(LOCALE_KEY)
if(locales[lang]==undefined){lang=DEFAULT_LANG}
}
window.localstorage.setItem(LOCALE_KEY,lang);
Object.keys(locales).forEach(function(lang){
document.body.classList.remove(`lang-${lang}`);
});
document.body.classList.add(`lang-${lang}`);
document.body.setAttribute('lang',lang);
i18n.locale=lange;
Vue.config.lang=lang;
}
setup();
export default I18n;
我们对外提供一个setup的方法，给使用者修改当前使用语种的能力。同时，我们在setup里还做了三件事：
将当前语种存在localStorage中，保存用户的使用习惯；给body添加语种相关的class，因为不同语言可能导致排版出现差异，我们还需要配置，将当前语种存在
Vue的全局配置中，以便未来可能的使用。
最后在main.js中引入这个index.js就可以了
import Vue from ‘vue’
import App from './app.vue'
import router from './router'
import store from './store'
...
import i18n from '@/locales'
new Vue({router,store,i18n,render:h=>h(App)}).$mount('#app');vue实例外的js代码中的额文本怎么替换？
vue实例中我们可以使用this.$i18n.t,这里的this是vue的实例，那项目中的很多js代码在vue的实例之外。最简单的方法就是咋需要
使用的地方手动直接import i18n
这样在vue实例中使用this.$i18n.t,如果不是就先import ，使用i18n.t,这样显然复杂了。
为了解决这个问题，最直接的办法就是把i18n直接挂载在window下，变成全局变量。我们就不需要import了，直接使用i18n.t就可以了；
在main.js:
import Vue from 'vue'
import App from './app.vue'
import store from './store'
import router from './router'
...
import i18n from '@crm/locales'
...
window.i18n = i18n
new Vue({
i18n,
router,
store,
render: h => h(App),
}).$mount('#app')然而我们将组件中的import i18n全去掉，并将this.$i18n.t改成i18n.t.项目跑起来之后就报错了:i18n is not defined
显然是组件在调用i18n的时候，i18n还没有挂载到window上，所以执行顺序出了问题：
//假设webpack的入口文件是```main.js```
//main.js
import moduleA from 'moduleA'
console.log(1)
import moduleB from 'moduleB'
console.log(2)
//moduleA.js
console.log(3)
//moduleB.js
console.log(4)
//最终在浏览器中打印出的数字顺序是:
3
4
1
2跟ES6 module的机制有关系。import命令具有提升效果，会提升到整个模块的头部，首先执行，这种行为的本质是，import命令是编译阶段执行的，在代码运行之前。
这样我们就找到之前报错的原因了，我们先import app router这些视图，然后import i18n并挂载在window，所有组件的script中的代码都先执行，而此时i18n挂载到
window的代码还没有执行。import中的script代码执行完之后才到main.js中其他的js代码，我们首先将window.i18n=i18n移到locales/index中，然后调整main.js中的import的顺序：
//locales/index
...
setup()
window.i18n = i18n
export default i18n
//main.js
import Vue from 'vue'
import i18n from '@crm/locales'
import App from './app.vue'
import store from './store'
import router from './router'
...
标签：lang,vue,语言,js,Vue,i18n,import 来源： https://www.cnblogs.com/1156184981651a/p/12813731.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。