vue3 + i18n
安装npm install vue-i18nyarn add vue-i18nmain.js如果在一个模块系统中使用它,你必须通过 Vue.use() 明确地安装 vue-i18n:import { createApp } from 'vue'import App from './App.vue'import ElementPlus from 'element-plus'import 'eleme
·
安装
npm install vue-i18n
yarn add vue-i18n
main.js
如果在一个模块系统中使用它,你必须通过 Vue.use() 明确地安装 vue-i18n:
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import router from './router/index'
import i18n from './lang/i18n'
const app = createApp(App)
app.use(ElementPlus)
app.use(router)
app.use(i18n)
app.mount('#app')
在src目录下创建lang文件夹,下包含ch.js(中文包) en.js(英文包) index.js i18n.js(配置i18n)
ch.js
export default{
message: {
username: '用户名',
password: '密码',
login: '登录',
captcha: '验证码',
forgetPassword: '忘记密码?',
loginTip: '当前登录结果随机。验证码随便填',
editpassword: '修改密码',
logout: '退出登录',
errMsg: {
inputRequired: '请输入{cont}',
selectRequired: '请选择{cont}'
}
},
}
en.js
export default{
message: {
username: 'User Name',
password: 'Password',
login: 'Login',
captcha: 'Captcha',
forgetPassword: 'Forget Password?',
loginTip: 'The login result is random. Just fill in the captcha',
editpassword: 'Edit Password',
logout: 'Logout',
errMsg: {
inputRequired: 'Please Input {cont}',
selectRequired: 'Please Select {cont}'
}
},
}
index.js
import ch from './ch'
import en from './en'
export default {
ch,
en
}; //将i18n暴露出去,在main.js中引入挂载
i18n.js
import { createI18n } from 'vue-i18n' //引入vue-i18n组件
import messages from './index'
const language = (
(navigator.language ? navigator.language : navigator.userLanguage) || "ch"
).toLowerCase();
const i18n = createI18n({
fallbackLocale: 'ch',//预设语言环境
globalInjection:true,
legacy: false, // you must specify 'legacy: false' option
locale: language.split("-")[0] || "ch",//默认显示的语言
messages,//本地化的语言环境信息。
});
export default i18n
使用
{{ $t(`message.login`) }}
封装组件加入点击事件(js环境,不是typeScript环境)
<template>
<div>
<el-dropdown>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item
v-for="item in languages "
:key="item.value"
:disabled="languages === item.value"
><span @click="handSeletlanguages">{{item.name}}</span></el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</template>
<script>
import { defineComponent, reactive, toRefs, computed } from 'vue'
import { useI18n } from 'vue-i18n'
import $store from '../../store/index'
import { ElMessage } from 'element-plus'
export default defineComponent({
setup() {
const { locale } = useI18n()
console.log('locale' , locale)
const state = reactive({
languages: [
{
name: 'en',
value: 'en'
},
{
name: '中文',
value: 'ch'
}
],
handSeletlanguages: (lang) => {
locale.value = lang
$store.dispatch("setLang", lang)
ElMessage({
message: 'Switch Language Success',
type: 'success'
})
}
})
const languages = computed(() => {
return $store.state.languages
})
return {
...toRefs(state),
languages
}
}
})
</script>
store.js
import { createStore } from 'vuex'
export default createStore({
state: {
language: ''
},
mutations: {
setLang(state, language) {
state.language = language
}
},
actions: {
setLang(context, value) {
context.commit('setLang', value)
}
}
})
使用封装组件
<template>
<div class="login-context">
<div class="title-container">
{{ $t(`message.login`) }}
<langSelect></langSelect>
</div>
</div>
</template>
<script >
import { reactive, toRefs, defineComponent } from 'vue'
import langSelect from '../../components/lang/index.vue'
export default defineComponent({
components: {
langSelect
},
})
</script>
更多推荐
已为社区贡献2条内容
所有评论(0)