1.安裝插件:npm install vue-i18n ?--save

2.src下新建i18n文件夾,

　　i18n文件夾下創建langs文件夾和i18n.js文件

　　langs文件夾下創建cn.js; en.js; index.js

如圖:

3.? i18n.js:

import Vue from "vue"; import locale from 'element-ui/lib/locale' import VueI18n from "vue-i18n"; import messages from "./langs";Vue.use(VueI18n); const i18n = new VueI18n({locale: localStorage.lang || "cn",messages }); locale.i18n((key, value) => i18n.t(key, value))export default i18n;

4. cn.js:

import zhLocale from "element-ui/lib/locale/lang/zh-CN"; const cn = {message: {login: "登錄",password: "密碼不可為空",upassword: "密碼",uname: "賬戶",},...zhLocale };export default cn;

5. en.js:

import enLocale from 'element-ui/lib/locale/lang/en' const en = {message: {login: "Login",password: "Password is required",upassword: "password",uname: "account"},...enLocale };export default en;

6.index.js:

import en from "./en"; import cn from "./cn"; export default {en,cn };

7. main.js:

import Vue from 'vue' import App from './App' import store from './store' import i18n from './i18n/i18n' Vue.config.productionTip = falsewindow.app = new Vue({store,i18n,render: h => h(App) }).$mount('#app')

以上就是配置好了,可以使用了

8. 使用:

//data()中聲明 data() {return {lang: "",};}, //作為文本內容,綁定在標簽中 <div class="manage_tip"><span class="title">{{$t('message.login')}}</span></div> //作為屬性綁定<el-form-item :label="$t('message.uname')" prop="pnone"><el-input v-model="loginUser.pnone" placeholder="請輸入手機或郵箱"></el-input></el-form-item> //作為elementui 中的校驗規則,要放在computed中computed: {rules() {return {password: [{required: true,message: this.$t("message.password"),trigger: "blur"},{pattern: /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[\W_]).{6,16}$/,message: "輸入6-16位包含數字、字母、特殊字符的密碼",trigger: "blur"}],};}}, //切換中英文 <el-dropdown @command="handleCommand"><span class="el-dropdown-link">中英文切換<i class="el-icon-arrow-down el-icon--right"></i></span><el-dropdown-menu slot="dropdown"><el-dropdown-item command="cn">中文</el-dropdown-item><el-dropdown-item command="en">英文</el-dropdown-item></el-dropdown-menu> </el-dropdown>//切換語言的事件methods: {// 根據下拉框的中被選中的值切換語言handleCommand(command) {// this.$message("click on item " + command);switch (command) {case "cn": {this.lang = "cn";this.$i18n.locale = this.lang;break;}case "en": {this.lang = "en";this.$i18n.locale = this.lang;break;}default:break;}}, }

?

總結

以上是生活随笔為你收集整理的vue elementui 切换语言的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。