如何让一个vue项目支持多语言(vue-i18n)

1.安装：npm install vue-i18n --save
2.在main.js中引入vue-i18n

import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

创建中英文配置项文件

1.在public目录下新建zh.js和en.js

2.文件格式 en.js zh.js
en.js

const en = {home: {"deng_lu": "Sign in","zhu_ce": "Register"}
}

zh.js

const zh = {home: {"deng_lu": "登录","zhu_ce": "注册"}
}

在根目录index.html引入en.js和zh.js

main.js写入一下代码

const lang_zh = zh  //获取默认中文
const lang_en = en //获取默认英文
const messages = {en: lang_en,zh: lang_zh
}
const i18n = new VueI18n({locale: 'en', // set localemessages, // set locale messages
})new Vue({i18n,store,router,render: h => h(App)
}).$mount('#app')

最后在页面中使用

1.在html中

{{$t("home.geng_duo")}}

2.在js中使用

this.$t("home.deng_lu")

最后说明一下为什么要把语言文件放在public目录下，是因为这样在你打包项目后依然可以修改语言文件的配置，这样修改就不需要重新打包了

如何让一个vue项目支持多语言(vue-i18n) 打包后依然可以修改语言包并且修改后不需要重新打包，已更新
史上最短数组去重，最短数组最大值，最小值

如何让一个vue项目支持多语言(vue-i18n) 打包后依然可以修改语言包并且修改后不需要重新打包相关推荐

vue项目设置服务器地址,vue项目配置后端服务器地址
vue项目配置后端服务器地址内容精选换一换查询负载均衡器状态树.可通过该接口查询负载均衡器关联的监听器.后端云服务器组.后端云服务器.健康检查.转发策略.转发规则的主要信息,了解负载均衡器下资源 ...
vue项目html引入css,vue项目引入自定义.css的样式文件
ES6的引入方式: .vue文件中 css文件引入 @import "../assets/common/common.css";//自定义.css的样式路径 js文件的引入在ma ...
IDEA打开vue项目，每次打开的都是上一次的vue项目，即同一个vue项目，解决方法
今天在打开其他vue项目的时候出现了一个大bug 前提:我用一个写好的vue项目vue_01复制之后重命名为vue_02,其实这里并包名没有修改成功,你还需要打开vue_02,右击项目Refactor ...
vuex构建vue项目_如何使用Vue.js，Vuex，Vuetify和Firebase构建单页应用程序
vuex构建vue项目如何使用Vuetify和Vue路由器安装Vue并构建SPA (How to install Vue and build an SPA using Vuetify and Vue ...
vue项目导入elementui_在vue项目中使用elementui
如何让你的前端程序看起来很优雅而又简单. 最近我做的项目几乎都是管理系统,所以为了节约时间,开始使用ui框架-----elementui. 一个简单的管理系统来说,这套ui框架足够使用了,而且对样式的 ...
vue项目引入typescript（vue与ts混用）
说明为什么要在vue项目中使用ts? 新公司给了一个关于vue项目的需求,又由于ts是JavaScript的超集,强类型数据,组件化友好.故我选择在vue项目中引入ts. 下载typescript和 ...
如何搭建vue项目，完整搭建vue项目
完整开源vue项目第一步npm安装首先:先从nodejs.org中下载nodejs 直到Finish完成安装. 打开控制命令行程序(CMD),检查是否正常第二步项目初始化 1.第一步:安装vue ...
如何在vue项目中使用Highmaps(vue+Highmaps)
如何在vue项目中使用Highmaps 功能需求思路分析实现第一步:引入第二步:介绍一下这个world是个啥. 第三步:调用注意点(十分重要) 写在最后功能需求近日我接到了这么一个需求 ...
【移动端vue ui框架学习】vue项目如何使用基于vue的UI框架mint ui
看了下饿了么团队开发的PC端vue ui框架Element ui之后,顺便看了看同团队开发的移动端的vue ui框架mint ui,那么在vue项目中应该如何使用mint ui呢?以下做简单的记录. ...

如何让一个vue项目支持多语言(vue-i18n) 打包后依然可以修改语言包并且修改后不需要重新打包

如何让一个vue项目支持多语言(vue-i18n)

创建中英文配置项文件

在根目录index.html引入en.js和zh.js

main.js写入一下代码

最后在页面中使用

最后说明一下为什么要把语言文件放在public目录下，是因为这样在你打包项目后依然可以修改语言文件的配置，这样修改就不需要重新打包了

如何让一个vue项目支持多语言(vue-i18n) 打包后依然可以修改语言包并且修改后不需要重新打包相关推荐

最新文章

热门文章

如何让一个vue项目支持多语言(vue-i18n) 打包后依然可以修改语言包 并且修改后不需要重新打包

如何让一个vue项目支持多语言(vue-i18n)

创建中英文配置项文件

在根目录index.html引入en.js和zh.js

main.js写入一下代码

最后在页面中使用

最后说明一下为什么要把语言文件放在public目录下，是因为这样在你打包项目后依然可以修改语言文件的配置，这样修改就不需要重新打包了

如何让一个vue项目支持多语言(vue-i18n) 打包后依然可以修改语言包 并且修改后不需要重新打包相关推荐

最新文章

热门文章

如何让一个vue项目支持多语言(vue-i18n) 打包后依然可以修改语言包并且修改后不需要重新打包

如何让一个vue项目支持多语言(vue-i18n) 打包后依然可以修改语言包并且修改后不需要重新打包相关推荐