Home > Web Front-end > JS Tutorial > Standard processing methods in Vue (detailed tutorial)

Standard processing methods in Vue (detailed tutorial)

亚连
Release: 2018-06-20 10:32:53
Original
1221 people have browsed it

下面小编就为大家分享一篇Vue下的国际化处理方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

1:首先安装 Vue-i8n

npm install vue-i18n --save

注:-save-dev是指将包信息添加到devDependencies,表示你开发时依赖的包裹。 -save是指将包信息添加到dependencies,表示你发布时依赖的包裹。

2:在main.js中配置信息

import VueI18n from 'vue-i18n'
import {getCookie} from './common/cookie' //引入一个js文件,使用引入的函数getCookie,根据当前缓存切换语言
Vue.use(VueI18n)
const i18n = new VueI18n({
  locale: getCookie('PLAY_LANG','cn-zh'), //根据当前语言切换
  messages: {
    'cn-zh': require('./language/cn-zh'), //中文语言包
    'en-us': require('./language/en-us') //英文语言包
  }
})
new Vue({
  el: '#app',
  i18n, // 不要忘记
  router,
  template: &#39;<App/>&#39;,
  components: { App }
})
Copy after login

3:在目录src下新建一个language文件,尽可能与main.js同级存放,添加两个js文件,cn-zh和en-us,存放需要翻译的语言

4:getCookie函数

function getCookie(name,defaultValue) {
  var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)"); //"(^| )" 匹配开头和空格
  if (arr = document.cookie.match(reg))
    return unescape(arr[2]);
  else
    return defaultValue;
}
export {
  getCookie
}
Copy after login

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

在Vue中如何实现数字输入框组件

使用jquery如何实现侧边栏左右伸缩效果

在JS函数中有关setTimeout详细介绍

在mongoose中有关于更新对象的详细介绍

在JavaScript中如何实现AOP

使用nginx + node如何部署https

The above is the detailed content of Standard processing methods in Vue (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template