精华内容
下载资源
问答
  • vue中i18n中英文翻译

    2020-05-18 13:40:18
    别人做的 https://www.cnblogs.com/nxmin/p/8973534.html
    展开全文
  • 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-i18n 仓库地址:https://github.com/kazupon/vue-i18n兼容性:支持 Vue.js 2.x 以上版本安装方法:(此处只演示 npm)npm install vue-i18n使用方法:1、在 main.js 引入 vue-i18n (前提是要先引入 vue)import ...

    vue-i18n 仓库地址:https://github.com/kazupon/vue-i18n

    兼容性:

    支持 Vue.js 2.x 以上版本

    安装方法:(此处只演示 npm)

    npm install vue-i18n

    使用方法:

    1、在 main.js 中引入 vue-i18n (前提是要先引入 vue)

    import VueI18n from 'vue-i18n'

    Vue.use(VueI18n)

    2、准备本地的翻译信息

    const messages = {

    zh: {

    message: {

    hello: '好好学习,天天向上!'

    }

    },

    en: {

    message: {

    hello: 'good good study, day day up!'

    }

    }

    }

    3、创建带有选项的 VueI18n 实例

    const i18n = new VueI18n({

    locale: 'en', // 语言标识

    messages

    })

    4、把 i18n 挂载到 vue 根实例上

    const app = new Vue({

    router,

    i18n,

    ...App

    }).$mount('#app')

    5、在 HTML 模板中使用

    {{ $t("message.hello") }}

    查看运行效果:

    我们刚才选定的语言标识是 “en” 英语,现在改成 “zh” 中文,并查看效果

    const i18n = new VueI18n({

    locale: 'zh', // 语言标识

    messages

    })

    这样就可以轻松实现国际化了,实际开发中,页面内容肯定是很多的,我们可以把对应语言的信息保存为不同的 json对象

    const i18n = new VueI18n({

    locale: 'en', // 语言标识

    messages: {

    'zh': require('./common/lang/zh'),

    'en': require('./common/lang/en')

    }

    })

    zh.js

    // 注意:一定是 exports,不是 export,否则会报错,报错信息是下列的中的内容不是 string

    module.exports = {

    message: {

    title: '运动品牌'

    },

    placeholder: {

    enter: '请输入您喜欢的品牌'

    },

    brands: {

    nike: '耐克',

    adi: '阿迪达斯',

    nb: '新百伦',

    ln: '李宁'

    }

    }

    en.js

    module.exports = {

    message: {

    title: 'Sport Brands'

    },

    placeholder: {

    enter: 'Please type in your favorite brand'

    },

    brands: {

    nike: 'Nike',

    adi: 'Adidas',

    nb: 'New Banlance',

    ln: 'LI Ning'

    }

    }

    接下来,在HTML 模板中使用,要特别注意在 js 中的国际化写法

    // HTML

    {{$t("message.title")}}

    • {{brand}}

    // JS

    data () {

    return {

    brands: [this.$t('brands.nike'), this.$t('brands.adi'), this.$t('brands.nb'), this.$t('brands.ln')]

    }

    },

    查看编译效果:

    现在换成英文的:

    在上面的操作中,我们都是通过手动修改 locale 的属性值来切换语言,实际上,更希望浏览器自动识别,这里可以借助于 cookie

    1、新建一个 cookie.js 文件,用于读取cookie

    function getCookie(name,defaultValue) {

    var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");

    if (arr = document.cookie.match(reg))

    return unescape(arr[2]);

    else

    return defaultValue;

    }

    export {

    getCookie

    }

    2、在 main.js 中引入这个js,并通过 PLAY_LANG 属性来获取浏览器的语言

    const i18n = new VueI18n({

    locale: getCookie('PLAY_LANG','zh'), // 语言标识

    messages: {

    'zh': require('./common/lang/zh'),

    'en': require('./common/lang/en')

    }

    })

    这里需要注意两个极易出错的地方:

    (1)、将 $t() 写成了 $()

    (2)、json 中在同一个对象里有同名属性

    vue-i18n 提供了一个全局配置参数叫 “locale”,通过改变 locale 的值可以实现不同语种的切换

    下面的案例借用了 Element UI 的弹窗样式,上面的步骤不再赘述,直接上核心代码

    // template

    {{$t('test')}}

    中文/EN

    // js方法

    changeLocale () {

    this.$confirm(this.$t('layer.toggle'), this.$t('layer.tips'), {

    confirmButtonText: this.$t('button.ok'),

    cancelButtonText: this.$t('button.cancel'),

    type: 'warning'

    }).then(() => {

    let locale = this.$i18n.locale

    locale === 'zh' ? this.$i18n.locale = 'en' : this.$i18n.locale = 'zh'

    }).catch(() => {

    this.$message({

    type: 'info',

    })

    })

    },

    效果:

    在配合 Element-UI 一起使用时,会有2个问题:

    (1)、页面刷新后,通过按钮切换的语言还原成了最初的语言,无法保存

    (2)、框架内部自带的提示文字无法更改,比如像时间选择框内部中的提示文字

    关于第一个问题,可以在初始化VueI18n实例时,通过 localStorage 来为 locale 对象赋值

    const i18n = new VueI18n({

    locale: localStorage.getItem('locale') || 'zh',

    messages

    })

    在切换语言的时候可以缓存不同的语言选项,并且可以长期保存,不会因为刷新网页而改变locale 的属性值

    中文

    English

    toggleLang(lang) {

    if(lang == 'zh'){

    localStorage.setItem('locale', 'zh')

    this.$i18n.locale = localStorage.getItem('locale')

    this.$message({

    message: '切换为中文!',

    type: 'success'

    })

    } else if (lang == 'en') {

    localStorage.setItem('locale', 'en')

    this.$i18n.locale = localStorage.getItem('locale')

    this.$message({

    message: 'Switch to English!',

    type: 'success'

    })

    }

    关于第二个问题,更改Element 组件内部语言,这里还涉及到 手动处理 vue-i18n@6.x 兼容性问题。官网已经做了详细介绍,这里依葫芦画瓢跟着实现一下

    i18n.js

    import Vue from 'vue'

    import VueI18n from 'vue-i18n'

    import locale from 'element-ui/lib/locale';

    import zh from './langs/zh'

    import en from './langs/en'

    import enLocale from 'element-ui/lib/locale/lang/en'

    import zhLocale from 'element-ui/lib/locale/lang/zh-CN'

    Vue.use(VueI18n)

    const messages = {

    en: Object.assign(en, enLocale),

    zh: Object.assign(zh, zhLocale)

    }

    console.log(messages.zh)

    const i18n = new VueI18n({

    locale: localStorage.getItem('locale') || 'zh',

    messages

    })

    locale.i18n((key, value) => i18n.t(key, value)) //为了实现element插件的多语言切换

    export default i18n

    按照如上把国际化文件都整合到一起,避免main.js 中大段引入相关代码。main.js 中与 i18n 相关的就只剩两行代码

    import i18n from './i18n/i18n' // 1行

    window.app = new Vue({

    el: '#app',

    router,

    store,

    i18n, // 2行

    components: { App },

    template: ''

    })

    效果如下:

    以上demo地址:https://github.com/frwupeng517/element-admin/tree/master/src/i18n

    展开全文
  • 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不久,所以对vue了解还不是很深,一直处于边做边查的状态,这几天开发一个双语网站。...首先是引进i18n然后在index.jsimport VueI18n from 'vue-i18n'import Vue from 'vue'Vue.use(VueI18n)cons...
  • vue-i18n 仓库地址:https://github.com/kazupon/vue-i18n 兼容性: 支持 Vue.js 2.x 以上版本 安装方法:(此处只演示 ...1、在 main.js 引入 vue-i18n (前提是要先引入 vue) import VueI18n from 'vue...
  • 在上述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 ...
  • 后来我问起他来怎么这么快,他不好意思地挠挠头说:“这…… 都是组织...我完整读了一遍文档后,觉得这是我和 VuePress 最接近的时刻,刹那间我失去了自己第一次接触 VuePress 英文文档时,那种强烈无助的窘迫感。小...
  • 兼容性: 支持 Vue.js 2.x 以上版本 安装方法: npm install vue-i18n ...1、准备本地的翻译信息 const messages = { zh: { message: { hello: '好好学习,天天向上!' } }, en: { message: { hello:...
  • npm 下载 vue-i18n 插件npm install vue-i18n -S定义文件静态目录(这里用到简体,繁体,英文)image.png文件采取对象形式,编写个版本语言。简繁英image.png在main.js引用import VueI18n from 'vue-i18n';Vue.use...
  • vue实现中英文切换功能

    千次阅读 2019-10-18 09:57:00
    1、首先在百度翻译的开放平台,获取属于自己的APPid,没有注册先注册 2、得到了这些基本信息后,需引入md5插件npm install --save js-md5 3、请求接口及对应参数 通用翻译API HTTP地址: ...
  • Vue国际化处理 vue-i18n 以及项目自动切换中英文 1. 环境搭建 命令进入项目目录,执行以下命令安装vue 国际化插件vue-i18n npm install vue-i18n --save 2. 项目增加国际化翻译文件 在项目的src下添加lang...
  • 1、在 main.js 引入 vue-i18n (前提是要先引入 vue) import VueI18n from 'vue-i18n' Vue.use(VueI18n) 2、准备本地的翻译信息 const messages = { zh: { message: { hello: '好好学习,天天向上!' } },...
  • 文献引用作者出处信息:Freeman, Adam Pro Vue.js 2, 2019 (如年份太老可改为近2年很多毕业生都这样做毕竟外文翻译要求也不高) 英文3912单词22450字符(字符就是印刷符)中文6122汉字如果字数多了可自行删减大多数学校...
  • 本文是中英对照毕业设计论文外文文献翻译下载后直接可用省去您找文献pdf整理成word以及翻译的时间一辈子也就一次的事 文献引用作者出处信息:Edd Yerburgh Testing Vue. Js Applications,2019 (如年份太老可改为近2年...
  • i18n 中英文翻译

    2019-10-15 10:47:49
    执行以下命令安装vue 国际化插件vue-i18n npm install vue-i18n --save 执行以下命令安装js-cookie npm install js-cookie --save 在src目录下 新建lang文件夹 在lang文件夹下存放 语言脚本 如下: en.js ...
  • vue-i18n 仓库地址:...1、在 main.js 引入 vue-i18n (前提是要先引入 vue) import VueI18n from 'vue-i18n' Vue.use(VueI18n) 2、准备本地的翻译信息 const messag...
  • vue-i18n 仓库地址:...1、在 main.js 引入 vue-i18n (前提是要先引入 vue) import VueI18n from 'vue-i18n' Vue.use(VueI18n) 2、准备本地的翻译信息 复制代码 const messages = { zh: {
  • 1.下载安装插件 ...在项目的src下添加lang文件夹增加中文翻译文件(zh.js)以及英文翻译文件(en.js),里面分别存储项目需要翻译的信息。 en.js 英文语言包: export const m = { //...
  • element 控件 中英文翻译

    千次阅读 2018-11-08 17:49:02
    import VueI18n from 'vue-i18n' import ElementUI from 'element-ui' import ElementLocale from 'element-ui/lib/locale' import enLocale from 'element-ui/lib/locale/lang/en' import zhLocale from 'elemen...
  • element默认中文版,但是我们在做英文页面时自己翻译很不爽,所以我们用element自带英文包,只要在html页面引入就可以了,具体引入方法有很多种,在此提供了我用过的一种,仅作为参考使用:补充知识:element-ui组...
  • 是和英文主站一个仓库clone 出来,使用vuepress 看下后续怎么发起PR啊。 四年前有幸参与了Vue2的一个响应式章节,在那之后的四年后的现在,再次看到自己曾经翻译过的文档,泪目。 <p>Vue 2 ...
  • 通过 VUE watch监听实现中英文切换时元素样式改变 1.前言 1.写项目的时候遇到的问题:新写的网页有中英文切换功能,但是当我切换成英文的时候,文本如果给定宽度,那么有时候翻译成英文文本会过长导致换行,可能会将...

空空如也

空空如也

1 2 3 4 5 ... 7
收藏数 121
精华内容 48
关键字:

vue中英文翻译

vue 订阅