vue中使用i18n

1、vue 安装国际化i18n

1 npm install vue-i18n --save
2 cnpm install vue-i18n --save (淘宝镜像安装)

2、创建文件

创建lang文件夹
创建index.js文件
创建en-us.js文件
创建zh-cn.js文件

index.js

import Vue from 'vue'
import iView from 'view-design'
import VueI18n from 'vue-i18n'
import zhCN from './zh-cn'
import enUS from './en-us'
// 引入iview的中英文翻译
import iviewZH from 'view-design/dist/locale/zh-CN'
import iviewEN from 'view-design/dist/locale/en-US'Vue.use(VueI18n)
Vue.locale = () => {}var locale = localStorage.getItem('lang')
export const i18n = new VueI18n({locale: locale,fallbackLocale: 'zh-CN',messages: { 'zh-CN': Object.assign(zhCN, iviewZH),'en-US': Object.assign(enUS, iviewEN) }, // 本地与iview国际结合silentTranslationWarn: process.NODE_ENV === 'production' // true 去除console中黄色报错
})Vue.use(iView, {i18n: (key, value) => i18n.t(key, value)
})// 切换中英文调用该方法
export function setI18nLanguage (lang) {i18n.locale = langdocument.querySelector('html').setAttribute('lang', lang)return lang
}

en-us.js

/*** 英文*/
const lang = {message: 'Hello'
}
export default lang

zh-cn.js

const lang = {message: '你好'
}
export default lang

3、在main.js 中引入文件index.js文件

// 路径为你自己的文件路径
import { i18n } from '@/utils/lang'/* eslint-disable no-new */
new Vue({el: '#app',router,i18n,components: { App },template: '<App/>'
})

4、组件中使用

// 在需要的组件中引入切换的方法
import {setI18nLanguage} from '../../utils/lang/index'// 切换语言方法switchLanguage (lang) {setI18nLanguage(lang)// 将语言放入localStorage，在初始化语言时取出，从而刷新页面时，不会恢复初始语言localStorage.setItem('lang', lang)}

   // 标签内使用<Button type="primary">{{$t('message')}}</Button>// 标签属性中使用<FormItem :label="$t('message')"></FormItem>// js 中使用this.$t('message')

vue中使用i18n相关推荐

vue中使用 i18n 遇到的问题
一: vue 报错解决:TypeError: Cannot read property '_t' of undefined" 前端报错如下: [Vue warn]: Error in ren ...
vue中如何使用i18n实现国际化
一.前言在4k广告机中需要实现多语言切换,这时候接触到国际化,前端框架无数,其中几种热门的框架都有相匹配的国际化插件工具.比如: vue + vue-i18n angular + angular-t ...
vue 项目的I18n国际化之路
I18n (internationalization ) ---未完善产品国际化是产品后期维护及推广中重要的一环,通过国际化操作使得产品能更好适应不同语言和地区的需求国际化重点: 1. 语言语言 ...
总结Vue中index.html、main.js、App.vue、index.js之间关系以及Vue项目加载流程
总结Vue中index.html.main.js.App.vue.index.js之间关系以及Vue项目加载流程文章目录总结Vue中index.html.main.js.App.vue.index ...
vue中element国际化语言切换
一. 安装依赖 npm install vue-i18n 二. 创建文件在src目录下先创建一个lang 文件夹,再创建两个js文件en.js(英文), zh.js(中文), 另外创建一个index ...
vue中谷歌地图标记点、聚合点图标自定义
vue中谷歌地图标记点.聚合点图标自定义标记点自定义聚合点自定义完整代码最近用vue+谷歌地图做国外项目,地图需要有标记点和聚合点. 标记点:1,图标样式自定义 2,点击更换图标聚合点:1, ...
Vue中如何引入ElementUI
使用vue-cli创建好test项目后,将element-ui引入到项目中使用npm 安装element-ui 跳转到test项目的根目录中使用npm i element-ui -S进行安装引入 ...
vue中如何实现实现中英文切换
一.安装 vue-i18n插件 npm i vue-i18n 二.main.js文件的配置 import VueI18n from 'vue-i18n'Vue.use(VueI18n) // 通过插件 ...
html5 语音包,在vue中使用vue-i18n按需加载语言包
1.新建目录结构如下: . ├── App.vue ├── assets │ └── langs │ ├── en │ │ └── index.js │ ├── zh │ │ └── inde ...

vue中使用i18n

1、vue 安装国际化i18n

2、创建文件

3、在main.js 中引入文件index.js文件

4、组件中使用

vue中使用i18n相关推荐

最新文章

热门文章