npm install vue-i18n -S
npm install js-cookie --save
import VueI18n from 'vue-i18n';
import cookie from 'js-cookie';
Vue.use(VueI18n);
Vue.prototype.cookie = cookie;
// 设置 cookie 工具函数
Vue.prototype.set_cookie = (name, data, expires) => {
cookie.set(name, data, {
expires: expires
})
}
const i18n = {
locale: cookie.get('lang') || 'zh', // 语言标识,第一次登录默认是中文
messages: {
zh: require('@/assets/language/language/local_zh'), // 汉语
en: require('@/assets/language/language/local_en'), // 英语
}
}
new Vue({
el: '#app',
router,
i18n, // 把 i18n 挂载在全局上
components: { App },
template: ' '
})
注意:二个文件夹的命名要一样
module.exports = {
login: {
loginhello:"Hello",
loginTitle: "Welcome Sign In",
}
}
module.exports = {
login: {
loginhello:"你好",
loginTitle: "欢迎登录",
}
}
{{ $t("login.loginhello") }}
{{ $t('login.loginTitle') }}
在 input 的 placeholder 中使用,其实就是 vue 中的 v-bind
<input :placeholder="$t(login.password)" maxlength="24">
this.$t('xxxxx.xxxxx');
<button @click="lang_change(1)">中文</button>
<button @click="lang_change(2)">英文</button>
methods:{
lang_change(value){
if(value==1){
this.$i18n.locale = "zh";
this.set_cookie('lang','zh',6); // 第一个参数是名字,第二个参数是当前的语言,第三个参数是表示 cookie 过期时间,可能是6(天)
}else{
this.$i18n.locale = "en";
this.set_cookie('lang','en',6);
}
npm install vue-i18n -S
import Vue from 'vue'
// 使用插件
import VueI18n from 'vue-i18n'
Vue.use(VueI18n);
const i18n = {
locale: localStorage.getItem('lang') || 'zh', // 语言标识,第一次登录默认是中文
messages: {
zh: require('./language/local_zh'), // 中文
en: require('./language/local_en'), // 英语
...... //要多少语言就自己添加多少
}
}
export default i18n
注意:二个文件夹的命名要一样
module.exports = {
login: {
loginhello:"你好",
loginTitle: "欢迎登录",
}
}
module.exports = {
login: {
loginhello:"Hello",
loginTitle: "Welcome Sign In",
}
}
import i18n from './assets/language/index.js' // 第一步:引入多语言配置文件index.js
new Vue({
el: '#app',
router,
i18n, // 第二步:挂载 i18n插件
components: { App },
template: ' '
})
{{ $t("login.loginhello") }}
{{ $t('login.loginTitle') }}
在 input 的 placeholder 中使用,其实就是 vue 中的 v-bind
<input :placeholder="$t(login.password)" maxlength="24">
this.$t('xxxxx.xxxxx');
<button @click="lang_change(1)">中文button>
<button @click="lang_change(2)">英文button>
methods:{
lang_change(value){
if(value==1){
this.$i18n.locale = "zh";
localStorage.setItem('lang',"zh"); // 这样保存起来可以防止刷新页面就回到了初始值
}else{
this.$i18n.locale = "en";
localStorage.setItem('lang',"en"); // 这样保存起来可以防止刷新页面就回到了初始值
}