Vue国际化配置

缺乏、安全感 2021-12-16 07:39 307阅读 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 条评论，307人围观）

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

相关阅读

相关 SpringBoot配置国际化

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

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

相关 vue实现国际化

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

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

相关 vue-i18n国际化

文章目录 vue-i18n 安装使用 vue-i18n Vue i18n国际化多语言适配安装 cnpm ins

比眉伴天荒/ 2022年12月29日 00:30/ 0 赞/ 283 阅读

相关 vue国际化（vue-i18n）

一、安装(npm安装) npm install vue-i18n 二、配置（main.js文件配置） 1、引入 import Vue from 'vu

本是古典何须时尚/ 2022年11月28日 10:47/ 0 赞/ 192 阅读

相关 vue3.0国际化

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

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

相关 Spring 国际化配置

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

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

相关字符串国际化配置

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

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

相关 SpringBoot国际化配置分析

DispatcherServlet使得开发人员可以通过客户端的Locale来自动转换消息进行国际化；在整个国际化的过程中，主要分成两步，一是解析客户端的Locale，一是查找国

末蓝、/ 2022年05月12日 09:56/ 0 赞/ 199 阅读

相关 SprringBoot 配置国际化

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

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

相关 Vue国际化配置

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

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