项目中vue-i18n的使用

superfortunate

已于 2022-07-26 22:56:33 修改

阅读量604

点赞数

分类专栏： vue使用记录文章标签： vue.js javascript 前端

于 2022-07-26 22:47:34 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_59598992/article/details/126004354

版权

vue使用记录专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中集成并使用vue-i18n进行多语言支持。首先通过npm安装vue-i18n，然后在项目文件夹下创建lang文件夹并引入语言包。接着配置语言环境信息，新建对象并暴露出去。最后在main.js中导入并挂载i18n实例，使得全局可用。在组件中，可以使用$t方法调用对应的语言信息，如用户名和密码的占位符。整个过程简单明了，有助于提升项目的国际化体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.安装

npm install vue-i18n

`2.项目文件夹（一般名为lang或locales）中的index.js引入使用`

import Vue from 'vue'
import VueI18n from 'vue-i18n'
// default lang
import zhCN from './lang/zh-CN'

Vue.use(VueI18n)

3.准备语言环境信息，将上面引入的./lang/zh-CN（另外专门放置语言信息的文件）拆开放入，当然可以在index.js中写更多，例如改变语言的funtion

const messages = {
  'zh-CN': {
    ...zhCN
  }
}

4.new对象暴露出去

const i18n = new VueI18n({
  //silentTranslationWarn: true,
  locale: defaultLang,  //set locale
  //fallbackLocale: defaultLang,
  messages
})

export default i18n

5.在项目main.js中导入挂载

import i18n from '@/appCore/locales';
new Vue({
    router,
    store,
    i18n,
    // init localstorage, vuex, Logo message
    created: bootstrap,
    render: h => h(App)
}).$mount('#app');

6.具体在组件中使用，$t("message.hello")

<a-input-password
              :placeholder="$t('user.login.password.placeholder')"
              v-decorator="[
                'password',
                {rules: [{ required: true, message: $t('user.password.required') }]}
              ]"
            >

前面引入的zn-CN.js部分

export default {
  'user.login.userName': '用户名',
  'user.login.password.placeholder': '密码',
}

学习快乐！