Vue国际化配置

缺乏、安全感 2021-12-16 07:39 325阅读 0赞

# **Vue国际化配置** #

### **1、引入vue-i81n** ###

npm install vue-i18n --save

## ##

### **2、创建不同语言的json格式文件** ###

*  在src文件夹下新建目录和文件，格式如下
    
     *  src
        
         *  common
            
             *  lang
                
                 *  en.js
                 *  zh.js
 *  en.js

module.exports = {
      msg: {
        msg_welcome:'Welcome!',
        msg_wait:'Please Wait!'
      },
      error: {
        error_upload: 'Error Upload !',
        error_operate: 'Error Operate !',
      }
    }

*  zh.js

module.exports = {
      msg: {
        msg_welcome:'欢迎！',
        msg_wait:'请等待！'
      },
      error: {
        error_upload: '上传错误！',
        error_operate: '操作错误！',
      }
    }

### **3、main.js配置** ###

import VueI18n from 'vue-i18n'
    Vue.use(VueI18n);
    const i18n = new VueI18n({
      locale: 'zh',// 语言标识
      messages: {
        'zh': require('./common/lang/zh'),
        'en': require('./common/lang/en')
      }
    });
    
    
    
    new Vue({
      el: '#app',
      router,
      i18n,//国际化
      components: {App},
      template: '<App/>'
    })

### **4、vue文件中引用** ###

*  属性中引用【注：属性前加:】

:title="$t('msg.msg_welcome')

*  直接引用

{
       {$t("msg.msg_welcome")}}

*  js中引用【注：在请求的处理函数中记得将this先赋值给变量，之后用新的变量来进行调用】

this.$t("msg.msg_welcome")

发表评论取消回复

表情：

评论列表（有 0 条评论，325人围观）

还没有评论，来说两句吧...

相关阅读

相关 SpringBoot配置国际化

> [Java知识点总结：想看的可以从这里进入][Java] 目录 2.8、国际化配置 2.8.1、配置文件

布满荆棘的人生/ 2024年03月25日 23:19/ 0 赞/ 84 阅读

相关 springboot国际化配置

springboot国际化配置添加配置类 login.btn=登陆 login.password=密码 login.remember=记住我

Love The Way You Lie/ 2023年07月18日 09:19/ 0 赞/ 29 阅读

相关 Laravel + Vuetify 配置 vue-i18n 支持国际化

Laravel 整合 Vuetify 、 vue-i18n 前言 Internationalization 国际化

绝地灬酷狼/ 2023年06月29日 07:26/ 0 赞/ 9 阅读

相关 vue实现国际化

安装vue-i18n，可使用npm安装依赖包： npm install vue-i18n ![20191122133523443.png][] mian.js i

谁践踏了优雅/ 2023年06月15日 11:25/ 0 赞/ 177 阅读

相关 React 国际化配置

依赖 yarn add react-intl 重要目录结构练习时可以先按此目录结构把文件都新建好 |- src | |-- i18n

深藏阁楼爱情的钟/ 2023年03月05日 03:18/ 0 赞/ 3 阅读

相关 vue3.0国际化

安装 npm install vue-i18n@next 快速使用封装组件前提准备 > 创建 /@ts/language/index.ts

Love The Way You Lie/ 2022年09月05日 05:21/ 0 赞/ 165 阅读

相关 Spring 国际化配置

<bean id="messageSource" class="org.springfr

布满荆棘的人生/ 2022年07月03日 14:59/ 0 赞/ 242 阅读

相关字符串国际化配置

第一步：新建下面properties两个文件，代表一个英文，一个中文，还可以新建别的语言 hello\_en\_US.properties hello\_zh\_CN

柔情只为你懂/ 2022年05月14日 15:57/ 0 赞/ 279 阅读

相关 SprringBoot 配置国际化

一、LocaleResolver 国际化的支持中一个重要的类是 LocaleResolver，它提供了四种默认实现： 1. `AcceptHeaderLocaleRe

阳光穿透心脏的1/2处/ 2022年04月12日 09:23/ 0 赞/ 201 阅读

相关 Vue国际化配置

Vue国际化配置 1、引入vue-i81n npm install vue-i18n --save 2、创建不同语言的json格式文件

缺乏、安全感/ 2021年12月16日 07:39/ 0 赞/ 326 阅读