精华内容
下载资源
问答
  • 1:下载vue-i18n插件 npm install vue-i18n 2:创建中英文js文件 在文件中写入需要翻译的内容 ...export const m = { help: "帮助", homeSearch: "请输入", ...//引入中英文切换插件vue-i18n import VueI18n f

    1:下载vue-i18n插件

    npm install vue-i18n
    

    2:创建中英文js文件

    在文件中写入需要翻译的内容

    中文版cn.js

    export const m = {
      help: "帮助",
      homeSearch: "请输入",
    }
    

    英文版en.js

    export const m = {
      help: "help",
      homeSearch: "Please input",
    }
    

    3:配置main.js文件

    //引入中英文切换插件vue-i18n
    import VueI18n from 'vue-i18n'
    
    Vue.use(VueI18n) // 挂载
    
    const i18n = new VueI18n({
      locale: 'zh-CN',    // 语言标识
      messages: {
        'zh-CN': require('./utils/i18n/langs/cn'),   // 中文版cn.js文件路径
        'en-US': require('./utils/i18n/langs/en')    // 英文版en.js文件路径
      }
    })
    
    new Vue({
      el: '#app',
      render:h=>h(App),
      router,
      store,
      i18n,  // !!!!!一定要引入
    })
    

    4:语言切换组件

    html代码

    <el-dropdown trigger="click" @command="setLanguage" @visible-change="visibleChange">
    	<span class="el-dropdown-link">
    		<el-button type="primary" size="small" class="languageBtn"><span>{{translate}}</span><i :class="languageIcon"></i></el-button>
    	</span>
    	<el-dropdown-menu slot="dropdown">
    		<el-dropdown-item command="en">English</el-dropdown-item>
    		<el-dropdown-item command="cn">中文</el-dropdown-item>
    	</el-dropdown-menu>
    </el-dropdown>
    

    js代码

    data() {
    	translate: "中文",
    	languageIcon: "el-icon-caret-bottom"
    },
    methods() {
    	setLanguage(name) {
    		if (name === "cn") {
    			this.translate = "中文"
    	        this.$i18n.locale = 'zh-CN'		// 切换为中文
    	        this.$message.success('已切换中文');
    		} else {
    	        this.translate = "English"
    	        this.$i18n.locale = 'en-US'		// 切换为英文
    	        this.$message.success('Chinese switched');
    		}
    	},
    	visibleChange(value) {
    		if(value){
    	        this.languageIcon = "el-icon-caret-top"
    		} else {
    	        this.languageIcon = "el-icon-caret-bottom"
    		}
    	}
    }
    
    

    5:数据渲染

    使用方式一:

    <el-button
    	type="primary"
    	icon="el-icon-plus"
    >{{$t('m.help')}}</el-button>
    

    使用方式二:

    <el-input
    	v-model="value"
    	:placeholder="$t('m.homeSearch')"
    ></el-input>
    

    6:看效果

    在这里插入图片描述

    在这里插入图片描述
    参考https://blog.csdn.net/m0_46627730/article/details/107590852

    展开全文
  • 一个Vue.js项目 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev --host= " you computer IP('phone devtools') " # build for production with minification...
  • vue-i18n中英文翻译

    2021-01-14 16:32:29
    i18n的安装我就不说了网络上都有教程,这次主要说一下中英文翻译的写法和中英文图片的替换。 直接上代码。 下面是HTML上的中英文翻译,index.noConnect是关联zh.js和en,js里的中英文。 下面是zh.js和en,js里的中英文...

    i18n中英文写发和中英文图片的替换

    i18n的安装我就不说了网络上都有教程,这次主要说一下中英文翻译的写法和中英文图片的替换。
    直接上代码。

    下面是HTML上的中英文翻译,index.noConnect是关联zh.js和en,js里的中英文。

    下面是zh.js和en,js里的中英文写法

    // 中文文件夹
    const zh = {
    index: {
    	noConnect: '无法连接'
    },
    }
    // 英文文件夹
    const en = {
    index: {
    	noConnect: 'noConnect'
    },
    }
    

    html

    <div class="bettery1" v-show="unConnect">{{ $t('index.noConnect') }}</div>
    

    还可以这样写

    // 中文文件夹
    const zh = {
    	noConnect: '无法连接'
    },
    }
    // 英文文件夹
    const en = {
    	noConnect: 'noConnect'
    }
    

    那相应的咱们HTML里的写法也需要更换

    <div class="bettery1" v-show="unConnect">{{ $t('noConnect') }}</div>
    

    还有一种情况比如说:1分27秒只需要翻译“分”和“秒”

     <span>{{`1${$t('index.Log.minute')}27${$t('index.Log.second')} `}}</span>
    

    JavaScript翻译1分27秒

    `1${this.$t("Log.minute")}27${this.$t("Log.second")}`
    

    JavaScript翻译中英文

    this.$t('CommonProbl.tip2'),
    

    js翻译中英文图片

     img: this.$i18n.locale === "zh" ? "I_3.png" : "I_3en.png",
    

    其中I_3.png和I_3en.png是两张不同的图片
    应该就这些吧,欢迎补充。

    展开全文
  • vue-i18n 中英文翻译

    2020-08-05 17:42:53
    实现中英文翻译切换以及cookie 存储 需要安装以下依赖 npm install vue-i18n --save npm install js-cookie --save main.js 内 注入i18n import Vue from 'vue' import App from './App.vue' import router ...

    实现中英文翻译切换以及cookie 存储 

     

    需要安装以下依赖  

    npm install vue-i18n --save
    npm install js-cookie --save

    main.js   内 注入i18n

    import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    import store from './store'
    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    import VueI18n from 'vue-i18n'
    import Cookies from 'js-cookie'
    
    Vue.use(ElementUI)
    
    Vue.use(VueI18n)
    //使用语言包
    const i18n = new VueI18n({
    	locale: Cookies.get('language') || 'zh',
    	messages:{
    		en:require("@/assets/i18n/langs/en.js"), //英文文件路径
    		zh:require("@/assets/i18n/langs/zh.js"), //中文文件路径
    	},
    	silentTranslationWarn: true
    })
    
    Vue.config.productionTip = false
    
    new Vue({
      router,
    	store,
    	i18n,
      render: h => h(App)
    }).$mount('#app')
    

    新建 中英文js文件

    zh.js
    
    module.exports = {
      navBar:{
        home:"首页",
        name:"张三"
      }
      
    }
    
    
    en.js
    
    module.exports = {
      navBar:{
        home:"HOME",
        name:"zhangsan"
      }
    }

    需要引入翻译的文件   实例代码:

    <template>
      <div id="translate" class="translate">
        <p>{{ $t('navBar.home')}}</p>
        <p>{{ $t('navBar.name')}}</p>
        <el-button
        @click="changeLaguages" 
        type="default"
        >切换语音</el-button>
      </div>
    </template>
    
    <script type="text/javascript">
    import Cookies from 'js-cookie'
    
    export default {
      name: "translate",
      data() {
        return {
          lang: Cookies.get('language') || 'zh',
        }
      },
      components: {
      },
      methods:{
        changeLaguages () {
          console.log(this.$i18n.locale)
          let lang = this.$i18n.locale === 'zh' ? 'en' : 'zh'
          this.$i18n.locale = lang;
          Cookies.set("language",lang)
        }
      }
    }
    </script>
    
    <style lang="less" scoped>
      p{
        padding: 10px 0;
      }
      
    </style>
    

     

     

     

     

     

     

    展开全文
  • vue中英文切换网站

    2019-12-30 16:56:49
    环境:vue2.x+webpack3.x+element-ui@2.12.0...新建lang文件(与components同一文件下,机src文件下),在lang文件中新建en.js和zh.js文件,用于放置中英文文案脚本 在lang文件中新建index.js文件,用于引包(...

    环境:vue2.x+webpack3.x+element-ui@2.12.0(element-ui按需引入)

    配置:

    第一步:cnpm install vue-i18n -D

    第二步:

    新建lang文件(与components同一文件下,机src文件下),在lang文件中新建en.js和zh.js文件,用于放置中英文文案脚本

     在lang文件中新建index.js文件,用于引包(element-ui为按需引入)

    import Vue from 'vue'
    import VueI18n from 'vue-i18n'
    
    import enLocale from './en'
    import zhLocale from './zh'
    import elementEnLocale from 'element-ui/lib/locale/lang/en'
    import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'
    
    Vue.use(VueI18n)
    
    const messages = {
      en: {
        ...enLocale,
        ...elementEnLocale
      },
      zh: {
        ...zhLocale,
        ...elementZhLocale
      }
    }
    // Create VueI18n instance with options
    const i18n = new VueI18n({
      locale: localStorage.lang || 'zh',
      messages, // set locale messages
    })
    
    export default i18n

    第三步:

    在main.js中配置:

    import i18n from './lang/index'
    import ElementLocale from 'element-ui/lib/locale'
    ElementLocale.i18n((key, value) => i18n.t(key, value))
    
    
    
    new Vue({
      el: '#app',
      router,
      store,
      i18n,
      components: { App },
      template: '<App/>'
    })

    第四步:

    导航栏中放置切换按钮事件:

    <span @click="langChange('zh')">中文</span>/<span @click="langChange('en')">英文</span>
    
    
    // 语言切换
    langChange (e) {
    	console.log(e)
    	localStorage.setItem('lang', e)
    	this.$i18n.locale = e
    }

    第五步:

    文本中使用:

    {{$t('publicHeader.tab1')}}

     

    展开全文
  • vue实现在线翻译

    千次阅读 2018-08-03 11:42:23
    这个是用VUE实现简单的在线翻译 GITHUB:https://github.com/pengdadasunnyboy/vue-translate 有积分的可以https://download.csdn.net/download/sunnyboysix/10581178源码打包 npm run dev就可以启动项目了 简单...
  • 这是个vue2.0 实现翻译的小案例 下载在自己电脑 直接npm run dev即可
  • Java Cron表达式解析 翻译为中文和英文
  • 在上述index.js文件,写入 import Vue from 'vue' import VueI18n from 'vue-i18n' import Cookies from 'js-cookie' import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui lang import ...
  • vue实现中英文切换

    千次阅读 2018-07-30 16:40:50
    vue-i18n 仓库地址:https://github.com/kazupon/vue-i18n 兼容性: 支持 Vue.js 2.x 以上版本   ...1、在 main.js 引入 vue-i18n (前提是要先引入 vue) import VueI18n from 'vue-i18n'...
  • vue实现网页中英文切换

    千次阅读 2020-07-26 11:32:05
    文章目录vue使用vue-i18n插件实现网页中英文切换1:下载vue-i18n插件2:自己定义中英文两套js文件3:配置main.js文件4:通过点击事件切换语种5:数据渲染6:效果图 vue使用vue-i18n插件实现网页中英文切换 1:下载...
  • Vue 中英文 组件 样式 写法 Vue 项目国际化样式处理 一、全局(main.js)添加自定义指令: v-lang 会自动添加 语言对应的 class 【中:zh,英:en】 Vue.directive('lang', { // 当被绑定的元素插入到 DOM 中...
  • vue实现中英文切换功能

    千次阅读 2019-10-18 09:57:00
    1、首先在百度翻译的开放平台,获取属于自己的APPid,没有注册先注册 2、得到了这些基本信息后,需引入md5插件npm install --save js-md5 3、请求接口及对应参数 通用翻译API HTTP地址: ...
  • vue--中英文切换

    千次阅读 2018-09-04 10:53:43
    安装: npm install vue-i18n 兼容性 支持vue2.x以上版本 使用方法: 1. 在main.vue中引用 import VueI18n from ‘vue-i18n’ 2. 然后使用 Vue.use(VueI18n) ...
  • element默认中文版,但是我们在做英文页面时自己翻译很不爽,所以我们用element自带英文包,只要在html页面引入就可以了, 具体引入方法有很多种,在此提供了我用过的一种,仅作为参考使用: 补充知识:element-...
  • 1、在项目的根目录安装插件 npm install vue-i18n 2、新建文件夹与文件存放自己配置的语言包,我这里新建的是lang文件夹 zh.js为中文语言包 en.js为英文语言包 文件夹与文件可以随便命名,但在引用的时候需要写...
  • vue中i18n中英文翻译

    2020-05-18 13:40:18
    别人做的 https://www.cnblogs.com/nxmin/p/8973534.html
  • //中英文语言切换相关 import { createI18n } from 'vue-i18n' const i18n = createI18n({ locale: getLanguageType(), // 获取当前的语言标识 messages: { 'zh': require('./assets/lang/zh'), 'en': require('...
  • 2、在main.js引入并且全局使用 import VueI18n from 'vue-i18n' Vue.use(VueI18n) // 使用多文件管理不同的语言是一个好习惯: const i18n = new VueI18n({ locale: 'zh',// 进入页面默认语言(如果你...
  • 在 main.js 引入 vue-i18n (前提是要先引入 vue) import VueI18n from 'vue-i18n' Vue.use(VueI18n) 准备本地的翻译信息 const messages = { zh: { message: { hello: '好好学习,天天向上!' } }...
  • 控制整个系统的中英文或其他语言显示,大概思路就是就是要把整个系统显示的中文对应的英文全部翻译一遍,然后写定key,根据配置的中英文属性,拿value。 1、npm installvue-i18n --save 安装依赖 2、编写语言文件...
  • vue-i18n的基本使用 首先肯定是下载啦! npm install vue-i18n --save 然后在src下边新建一个i8n文件夹 // import zhLocale from 'element-ui/lib/locale/lang/zh-CN' // 引入element语言包 const cn = { header:...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,086
精华内容 1,234
关键字:

vue中英文翻译

vue 订阅