vue使用国际化
- 先安装依赖
npm i vue-i18n -S
新建language文件夹（在src目录下）
-
新建config.js文件 （在language文件下）
const zh = { backManageSystem: '后台管理系统' } const en = { backManageSystem: 'Back Management System' } export { zh, en }; -
新建index.js文件（在language文件下）
import Vue from "vue" import VueI18n from "vue-i18n" Vue.use(VueI18n) import { zh, en } from "./config" const i18n = new VueI18n({ locale: 'zh', //设置默认语言 messages: { zh, en } }) export default i18n
-
在main.js引入并挂载实例
import i18n from './language/index' new Vue({ router, store, i18n, render: h => h(App) }).$mount('#app')
-
使用方法
<span>{{ $t("backManageSystem") }}</span> -
切换语言，通过 this.$i18n.locale='zh'或this.$i18n.locale='en' 切换语言
<template> <span>{{ $t("backManageSystem") }}</span> <el-button @click="changeLanguage">切换语言</el-button> </template> export default{ methods:{ /*切换语言*/ changeLanguage(){ this.$i18n.locale = this.$i18n.locale == "en" ? "zh" : "en"; } } }
