用Nuxt构建,实现一个英文 / 西班牙 / 中文语言的网站,配合vue-i18n去解决切换语言的问题记录 1.安装vue-i18n 2.新建locales文件,en-us.js / es-es.js / zh-cn.js ,分别对应 英文 / 西班牙 / 中文 ...
最近在用nuxt开发官网,同时支持多语言切换,所以又用到了 vue i n。 根据 nuxt 官网的demo,配置了 middleware 和 plugins 代码如下: emmmm,然后再加上一个语言切换的按钮,一切都那么地完美 然鹅 试试看刷新,显示的语言是用户切换后的语言,该怎么做呢 你可能第一时间想到的是保存在 localStorage 或 sessionStorage 中,因为我一开始就 ...
2018-12-24 19:22 0 1399 推荐指数:
用Nuxt构建,实现一个英文 / 西班牙 / 中文语言的网站,配合vue-i18n去解决切换语言的问题记录 1.安装vue-i18n 2.新建locales文件,en-us.js / es-es.js / zh-cn.js ,分别对应 英文 / 西班牙 / 中文 ...
一、实现步骤 1、安装vue-i18n并且创建store.js(vuex状态管理)文件 2、创建一个(middleware)中间件,用来管理不同的语言 3、创建不同语言的json文件作为语言包(例如: ~locales/en.json) 4、在pages文件夹下创建文件,并进行翻译 ...
欢迎关注前端早茶,与广东靓仔携手共同进阶 前端早茶专注前端,一起结伴同行,紧跟业界发展步伐~ 一、实现步骤 1、安装vue-i18n并且创建store.js(vuex状态管理)文件 2、创建一个(middleware)中间件,用来管理不同的语言 3、创建不同语言的json文件 ...
Nuxt.js国际化的前提是,已经使用脚手架工具搭建好了Nuxt.js的开发环境。 我使用的环境是nuxt@2.3 + vuetify@1.4 + vue-i18n@7.3 1. 先安装vue-i18n 2. 更新store文件 在@/store/index.js文件中,修改添加如下代 ...
一、安装插件 二、为了后续方便管理,在src下新建一个plugins文件夹专门管理插件 三、在plugins下新建i18n.js文件 // 使用localStorage存储语言状态是为了保证页面刷新之后还是保持原来选择的语言 ...
使用vue-i18n插件来实现vue项目中的国际化功能 vue-i18n安装 全局使用 vue页面中使用 输出如下 可传参数 使用模版: 输出如下: 回退本地化 上面语言环境信息的 ja 语言环境中不存在 message 键,当我们使用ja环境中 ...
vue的前端国际化 用的国际化插件是 vue-i18n,附上 github 传送门。 1,开发环境,用vue-cli 官方脚手架把开发环境给运行起来 2、安装 vue-i18n 3、注入 vue 实例中,实现调用 api 和 语法 先在 main.js 中引入 ...
项目安装vue-i18n 需要安装最新版的vue-i18n 或者用yarn 安装完成之后,可以看一下package.json文件;看是否是最新版的vue-i18n,我安装的是9.1.7。 在项目src文件夹中新建lang文件夹 新建lang文件夹,在lang文件夹中新建三个js ...