html引vue怎么实现国际化,vue-i18n实现国际化
需求
如果项目需要国际化,即点击按钮切换 中/英文。那么就需要引入 vue-i18n 插件
安装
首先创建项目
vue init webpack
然后安装 i18n 插件
npm install vue-i18n --save
创建语言包
src/common/lang/en.js
export const lang = {
welcome: 'Welcome to Your Vue.js App',
essential_links: 'Essential Links',
core_docs: 'Core Docs',
forum: 'Forum',
community_chat: 'Community Chat',
twitter: 'Twitter',
docs_for_this_template: 'Docs for This Template',
ecosystem: 'Ecosystem',
vue_router: 'vue-router',
vuex: 'vuex',
vue_loader: 'vue-loader',
awesome_vue: 'awesome-vue'
}
src/common/lang/zh.js
export const lang = {
welcome: '欢迎来到你的Vue.js应用',
essential_links: '基本环节',
core_docs: '核心文档',
forum: '论坛',
community_chat: '社区聊天',
twitter: '推特',
docs_for_this_template: '模板文档',
ecosystem: '生态系统',
vue_router: 'vue路由器',
vuex: 'vue状态管理器',
vue_loader: 'vue文件编译成html文件',
awesome_vue: 'vue图标库'
}
封装插件
src/common/lang/index.js
这里做了3件事
挂载 VueI18n组件到 Vue
将语言列表绑定到 Vue 的 prototype 中,之后就可以在任何地方通过 this 引用该变量了
新建 VueI18n 对象,指定当前语言标识 和 多国语言分别对应的资源列表,然后设置默认导出该变量
import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n) // 挂载i18n
Vue.prototype.language = [{ // 挂载全局变量
value: 'en-US',
text: 'English'
},
{
value: 'zh-CN',
text: '中文'
}
]
const i18n = new VueI18n({
locale: 'en-US', // 语言标识,通过this.$i18n.locale来切换语言
messages: {
'en-US': require('./en'), // 英文语言包
'zh-CN': require('./zh') // 中文语言包
}
})
export default i18n
修改模板
src/main.js
引入封装好的i18n变量,并将其添加到Vue的构造对象中
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import i18n from './common/lang/index'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
i18n,
router,
components: { App },
template: ''
})
src/components/HelloWorld.vue
对于绑定到全局里的language列表变量,通过vue的列表功能,将其自动添加到select元素的选项表里面
{{item.text}}
语言列表改变了语言之后,会触发onChange事件,通过修改 this.$i18n.locale 变量可以改变当前页面的语言。
对于需要国际化的变量,需要使用 $t(lang.strId)进行转换,因此需要在 computed 对象中对其进行处理
export default {
name: 'HelloWorld',
data () {
return {
msg: 'welcome'
}
},
methods: {
changeLang (event) {
console.log(event.target.value)
this.$i18n.locale = event.target.value
}
},
computed: {
getMsg: function () {
const str = 'lang.' + this.msg
return this.$t(str)
}
}
}
添加样式,将切换语言的列表固定在页面右上角
position: fixed;
top: 2rem;
right: 4rem;
}
结果展示
html引vue怎么实现国际化,vue-i18n实现国际化相关推荐
- vue中如何使用i18n实现国际化
一.前言 在4k广告机中需要实现多语言切换,这时候接触到国际化,前端框架无数,其中几种热门的框架都有相匹配的国际化插件工具.比如: vue + vue-i18n angular + angular-t ...
- 【vue 进阶指南 一】多语言国际化(中英文切换)
vue + element-ui + vue-i18n 多语言国际化 1.element-ui 并不支持最新版的vue-i8n 插件,开发时注意i18n的版本,当然本示例成功解决版本不兼容的问题,详细 ...
- 【vue】中英文切换(多语言国际化)
一.安装i18n插件 npm install vue-il8n@8.23.0 --save 二.创建语言包文件夹与配置 (1)index.js中 import Vue from 'vue' // 引入 ...
- vue中warning_使用vue的i18n 出现很多warning提示
问题描述 使用vue的i18n 出现很多warning提示 Module parse failed: Unexpected token (1:10) You may need an appropria ...
- vue 或 js 使用谷歌翻译实现国际化
问题 一般没有适配国际化的页面 我们会使用谷歌翻译插件进行翻译. 但由于使用浏览器中的谷歌翻译插件 会导致dom的结构发生改变,从而导致 vue react与dom操作绑定关系失效!这样就无法触发跳转 ...
- vscode国际化插件i18n Ally配置
在Vue.js中使用Vue I18n来实现国际化多语言设置,以往都是手动去找到文件写翻译,比较繁琐复杂.通过使用这个插件直接在页面中就可以构建和自动化翻译. 在商店下载i18n Ally插件 下载完成 ...
- vue firebase_如何使用Vue.js,Vuex,Vuetify和Firebase构建SPA:使用Firebase添加身份验证...
vue firebase 第4部分:了解如何使用Firebase添加身份验证和购物车 (Part 4: learn how to use Firebase to add authentication ...
- 怎么将vue模板转换为html,vue中自定义html文件的模板
如果默认生成的 HTML 文件不适合需求,可以创建/使用自定义模板. 一是通过 inject 选项,然后传递给定制的 HTML 文件.html-webpack-plugin 将会自动注入所有需要的 C ...
- vue 网络请求 axios vue POST请求 vue GET请求 代码示例
QQ技术交流群 173683866 526474645 欢迎加入交流讨论,打广告的一律飞机票 1.安装 axios 和 vue-axios 和 qs (qs是为了解决post默认使用的是x-www-f ...
- vue教程2 【Vue组件化编程】 组件的创建和使用 非单文件组件和单文件组件的区别
组件 实现局部功能的代码和资源的集合 非单文件组件 1.定义组件(创建组件) 2.注册组件 3.使用组件(写组件标签) 定义 使用Vue.extend(options)创建,其中options和new ...
最新文章
- dom4j读写xml文件
- 入选2020爱分析银行和零售数字化转型代表厂商,永洪科技有哪些经典案例可以借鉴?
- symfony api 错误响应_如何设计一个牛逼的 API 接口
- 【树莓派】关于tinyproxy问题处理
- CloudCare容器技术白皮书
- 【DP】【容斥】Nice to Meet You(AT3634)
- Vue项目中自动将px转换为rem
- 实战系列-IDEA中Spring MVC实现接口功能
- 年青人应知道的几个故事
- ThreadLocal的作用
- 计算机软考做题app,计算机软考真题app
- 怎么更改坐标轴标题access_excel图表如何修改x坐标轴数值,excel怎么设置横坐标标题...
- MATLAB胸部CT图像中肺部提取,轮廓跟踪技术勾画出肺部轮廓
- T检验是做什么的? --ttest--ttest2--matlab
- Fern Wifi Cracker
- 使用函数求余弦函数的近似值 (15 分)
- 如何获取保存阿里云的图片url
- H5接入微信公众号方法(超详细)
- 牙齿底部粉色原因-ECR(External cervical resorption)
- js小学生图区_js 图片区域可点击,适配移动端,图片大小随意改变
热门文章
- 7-4 (小字辈) 7-5 (列出叶结点) 7-6 (顺序存储的二叉树的最近的公共祖先问题)
- Java实现客户信息管理软件
- ubuntu下安装qq wechat wps 教程
- 利用python提取期货交易所的水单数据
- 弹球小游戏java代码_android 发射弹球小游戏 附完整源码下载
- 华为matebook x pro蓝屏和拆机更换固态硬盘
- 通用排序框架在爱奇艺推荐的应用
- 物联网数据 时序数据库_有关防止物联网数据泄露的方法的最终清单
- skyfire Sorry. Skyfire Cannot Provide Service In Your Country.解决 天火浏览器不能使用问题。...
- Visual Basic开发实战1200例(第I卷)pdf