vue使用國際化
- 先安裝依賴
npm i vue-i18n -S
新建language文件夾(在src目錄下)
-
新建config.js文件 (在language文件下)
const zh = { backManageSystem: '后臺管理系統(tǒng)' } 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', //設(shè)置默認(rèn)語言 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"; } } }