手把手前端国际化 i18n

最新推荐文章于 2024-07-19 17:58:27 发布

Itamiyo

最新推荐文章于 2024-07-19 17:58:27 发布

阅读量1.4k

点赞数 2

文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/weixin_46121261/article/details/121267687

版权

本文手把手教你如何在Vue.js项目中结合Element UI实现前端的i18n国际化，涵盖从引入、配置、语言文件设置、导航栏切换到组件及页面渲染的全过程。

摘要由CSDN通过智能技术生成

一、内容

vue + element + i18n

二、引入

npm install vue-i18n --save-dev
yarn add vue-i18n --save-dev

三、配置

import VueI18n from 'vue-i18n'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
import en from './assets/languages/en'
import zh from './assets/languages/zh'
Vue.use(VueI18n)

const messages = {
    'en': {
        ...en,
        ...enLocale // 或者用 Object.assign({ message: 'hello' }, enLocale)
    },
    'zh': {
        ...zh,
        ...zhLo