VueI18n 多语言使用 1. uniapp 的国际化 zh-Hans 简体中文 zh-Hant 繁体中文 国际化 (Internationalization，简称 i18n)：指软件开发具备支持多种语言的地区功能...VueI18n 多语言使用 一、创建国际化 json 文件 ├── locale│ ├── index.js│ ├── en.json│ ├── zh-Hans.json│ └── zh-Hant.json.../zh-Hans.json';export default { 'zh-Hans': zhHans, en } 二、main.js 引入并初始化 VueI18n // 导入国际化 json 文件import... from 'vue-i18n'Vue.use(VueI18n)const i18n = new VueI18n(i18nConfig)// 挂载到 Vue 实例const app = new Vue(...> js 中使用 this.
详细步骤 安装vue-i18n npm install vue-i18n -S 引入 在main.js中引入vue-i18n import VueI18n from 'vue-i18n' Vue.use...Vue({ el: '#app', router, i18n, // i18n template: '', components: { App } }) vue模板文件中使用...{{ $t("message.hello") }} js中使用 computed:{ hello(){ return this..../lang/cn.js' import enlang from '..../lang/en.js' const i18n = new VueI18n({ locale: 'cn', // 默认语言 messages: { 'cn': cnlang, '
首先安装vue-i18n包 新建locales/i18n.js文件 /** * Created by liweiliang 406320591@QQ.com on 2022/10/14 15:16....*/ import Vue from "vue"; import VueI18n from "vue-i18n"; import elementZhLocale from "element-ui/lib...elementZhLocale, }, }; /** * i18n 配置 * @param locale 本地化语言 * @param fallback 回退语言 * @returns {VueI18n...} */ function initI18n(locale, fallback) { Vue.use(VueI18n); let i18nOptions = { locale,...fallbackLocale: fallback, silentFallbackWarn: true, messages, }; return new VueI18n(i18nOptions
当然是直接用插件了，并不是自己实现 vue-i18n使用很简单： 安装依赖：npm i vue-i18n -S 引入、调用： import VueI18n from 'vue-i18n'; Vue.use...(VueI18n); 生成实例： const i18n = new VueI18n({ locale: 'zh', messages: { 'zh': require('@/assets.../lang/zh.js'), 'en': require('@/assets/lang/en.js') } }); locale默认采用messages里面的哪个语言，js里面内容： en.js...直接使用： {{$t('lang.login')}} 切换语言： this.$i18n.locale = type; 效果： ?...难的是内容对应的zh.js和en.js，更别说其他语言了。当然，vue-i18n还提供了其他属性和方法，只是官网我打不开，没办法多说一些。 element-ui也是通过切换语言文件实现的。
基本使用 安装 npm install –save vue-i18n 创建lang 文件夹 index.js中引入 i18n并使用 import Vue from 'vue' import VueI18n...from 'vue-i18n' Vue.use(VueI18n) const i18n = new VueI18n({ // 设置当前语言 locale: 'zh', messages...$mount('#app') 在任意页面都可使用国际化 { {$t('name')}} 文件拆分 一般文件字段量很大，需要拆分文件 index.js中引入 import Vue.../en' Vue.use(VueI18n) const i18n = new VueI18n({ // 设置当前语言 locale: 'zh', messages: {...还是会回到中文 设置切换浏览器语言 上边写的当前的语言切换是默认的状态，初始化的时候一定加载的是默认的，比如默认的是中文，无论你后期改成什么状态，最后重新加载时一定是中文 此时需要设置系统的语言环境 使用
/dist/vue-i18n.js"> npm npm install vue-i18n yarn yarn add vue-i18n vue-i18n 在 vue 单页面中使用...this.selected }, }, }); vue-i18n 在 vue，vuetify 项目中使用...'vuetify/dist/vuetify.min.css' import colors from 'vuetify/lib/util/colors' import VueI18n from 'vue-i18n...value: '选择、添加、移除' } } } } } } } // 默认语言 en, 项目使用...const i18n = new VueI18n({ locale: i18nLocale, messages }) const opts = { theme: { dark:
1.引入多语言首先在main.js中进行引入并注册vue-i18n，引入中文语言包和英文语言包（根据开发需求引入语言包）//main.js//多语言引入import VueI18n from 'vue-i18n'import...uni.getStorageSync('locale') :'zh_cn'2.在until.js等一些公共方法的文件中无法使用this....$t在公共的js文件中，无法使用this来引用已经注册的组件，我们需要声明一个i18n对象，导出使用import en from './en.json'import zhHans from '..../zh-Hans.json'import Vue from 'vue'; import VueI18n from 'vue-i18n'Vue.use(VueI18n)const i18n = new VueI18n...需要注意在一些公共js文件中，无法使用this,我们就需要声明一个i18n对象，导出使用；在写语言包时，需要注意语言包中的字段名需要保持一致，在请求头中通过切换语言来改变请求头的语言，调用接口后，后端就可以返回不同的语言数据了
import VueI18n from "vue-i18n"; //引入定义好的中英文语言 import messages from "..../langs"; //在vue中使用i18n Vue.use(VueI18n); //初始化设置默认语言 const i18n = new VueI18n({ locale: "en", messages...}); export default i18n; 6.main.js中引入i18n //main.js import i18n from "....1.插值使用 ?...插值使用 2.属性绑定 ? 属性绑定 3.变量使用 ? 变量使用 4.实现切换 //切换语言 methods: { switchLang() { this.
// 如果使用模块系统 (例如通过 vue-cli)，则需要导入 Vue 和 VueI18n ，然后调用...Vue.use(VueI18n)。...import Vue from 'https://unpkg.com/vue@2.6.10/dist/vue.esm.browser.js' Vue.use(VueI18n)...入口文件为 index.js，在 VueI18n 类中的 constructor 中先调用 install 方法注册 // Auto install if it is not done yet and...// 在 Vue 的原型中挂载 $t 方法，这是我们为什么能够直接在模板中使用的原因 // 把 VueI18n 对象实例的方法都注入到 Vue 实例上 Vue.prototype.
安装 yarn add vue-i18n 引入 import Vue from 'vue' import VueI18n from 'vue-i18n' Vue.use(VueI18n) main.ts...中配置词库 const i18n = new VueI18n({ locale: 'zh', // 通过 this....header: { title: 'title' } } 引用翻译 // html 中 {{ $t('lang.header.title') }} // js
vue项目需要中英文切换，查了资料，发现大部分都是采用 vue-i18n，但是写的比较简单，大部分都是全局引入语言包，遇到的几个问题 1、如何结合element-ui 实现中英文切换 2、如何在组件中使用各自的语言包.../zh" export default { en, zh } i18n.js import Vue from 'vue' import VueI18n from 'vue-i18n' import.../index.js' import store from '@/store' Vue.use(VueI18n) console.log("hi") const i18n = new VueI18n({...，会报警告 vue-i18n.esm.js?...但是能正常切换语言，只需要在VueI18n 实例中配置silentTranslationWarn: true const i18n = new VueI18n({ locale: localStorage.getItem
要保证引用顺序没有问题。...var language = navigator.browserLanguage; } return language; } //告诉vue引入国际化插件 Vue.use(VueI18n...if (get_language()=="zh-CN"){ loc = "cn" }else { loc = "en" } //生成国际化插件实例 const i18n = new VueI18n...其次，注意需要使用$t('')将属性包裹起来。推荐使用第一种方式，即v-text。 注意点 注意使用Vue.use(VueI18n);引入i18n。
在VUE中，我们可以使用官方推荐的国际化组件：http://kazupon.github.io/vue-i18n/....我们新建两个语言包，一个是en.js，一个是zh.js en.js export default { ya: "hello", website: "luofanting" } zh.js export...VueI18n from 'vue-i18n'; import en from "..../langs/zh"; Vue.use(VueI18n); const messages = { en: { ...en }, zh: { ...zh } }; const i18n...，默认使用的语言包 }); export default i18n 如此就轻松的配置完成，接下来看一下如何在组件当中使用 首先是main.js import Vue from 'vue' import
// 如果使用模块系统 (例如通过 vue-cli)，则需要导入 Vue 和 VueI18n ，然后调用...Vue.use(VueI18n)。...import Vue from 'https://unpkg.com/vue@2.6.10/dist/vue.esm.browser.js' Vue.use(VueI18n)...其中左侧是 Vue-i18n 提供的一些方法、组件、自定义指令等能力，右侧是 Vue-i18n 对数据的管理 入口文件为 index.js，在 VueI18n 类中的 constructor 中先调用...// 在 Vue 的原型中挂载 $t 方法，这是我们为什么能够直接在模板中使用的原因 // 把 VueI18n 对象实例的方法都注入到 Vue 实例上 Vue.prototype.
8.0.0 info All dependencies └─ vue-i18n@8.0.0 Done in 28.19s. 2.添加配置 2.1 在 src 下新建 i18n 目录，并创建一个 index.js...index.js import Vue from 'vue' import VueI18n from 'vue-i18n' Vue.use(VueI18n) // 注册i18n实例并引入语言文件，...文件格式等下解析 const i18n = new VueI18n({ locale: 'zh', messages: { 'zh': require('@/assets/languages..."Role Manage", "menuMng": "Menu Manage", "logMng": "Log Manage" } } 2.3 在 main.js...ElementUI) Vue.use(api) new Vue({ el: '#app', i18n, router, render: h => h(App) }); 3.字符引用 在原本使用字符串的地方
如果项目中使用的Vue框架，开发多语言网站就简单了。 大家思考一下，如果你接手了一个Vue项目需要支持中英两种语言，该怎么做呢？...代码如下： main.js import Vue from 'vue' import App from '..../App' import VueI18n from 'vue-i18n' const messages = { en: { message: { hello: 'world hello'...} }, zh: { message: { hello: '世界' } } } Vue.use(VueI18n) const i18n = new VueI18n({ locale
和en-US.js ja-JP.js，分别对应中文和英文 日文，你也可以提供多语言包，最后别忘记了将实例挂载至Vue。...步骤 1.在src下新建locale文件夹 在locale下建lang文件夹—-用来存放自己设置的多语言文件 index.js 入口文件 index.js里放置内容如下 import Vue...from 'vue' import VueI18n from 'vue-i18n' import { localRead } from '@/libs/util' import {...import enUS from 'vant/lib/locale/lang/en-US' import jaJP from 'vant/lib/locale/lang/ja-JP' Vue.use(VueI18n...const i18n = new VueI18n({ locale: lang, // 语言标识 // 默认语言 messages }) const vantLocales = lang
zh-CN.js、zh-TW.js，文件内容分别如下： //en-US.js export default { login:{ loginAccount:'please...文件，内容如下： import Vue from 'vue' import VueI18n from 'vue-i18n' import customZhCn from '....enUsLocale from 'iview/src/locale/lang/en-US' import zhTwLocale from 'iview/src/locale/lang/zh-TW' Vue.use(VueI18n...Object.assign(zhTwLocale, customZhTw), 'en-US': Object.assign(enUsLocale, customEnUs) } const i18n = new VueI18n...border-radius: 10px; float: left; position: relative; left: 20px; top: 5px; } 使用
src\utils\request.js： // request interceptor service.interceptors.request.use( config => { // do...： import Vue from "vue"; import VueI18n from "vue-i18n"; import Cookies from "js-cookie"; import elementEnLocale...element-ui lang import elementZhLocale from "element-ui/lib/locale/lang/zh-CN"; // element-ui lang Vue.use(VueI18n...values) { i18n.mergeLocaleMessage(language, values); i18n.locale = language; } const i18n = new VueI18n...接下来只需要把界面上对应的文本使用vue-i18n的$t()方法渲染就好了，比如： ? 前端需要改动的地方比较多，但都是类似的修改。。。直接看效果： ? ? ?
float 可以使用弹性布局 display: flex 也可以使用定位 侧边导航栏，可能我们需要来研究 element-ui 的组件 NavMenu 导航菜单 侧边导航栏需要我们路由的一些信息，比如路由对应的组件...import axios from 'axios'; import { Message, Msgbox } from 'element3'; import store from 'store/index.js...多语言 多语言会用到 vue-i18n 这样的插件 就需要研究官网文档了 vue-i18n 有一个 vite 多语言插件 intlify/vite-plugin-vue-i18n vite.config.js...} } 当然，可以在 main.js 引入多语言 import { createApp } from 'vue' import { createI18n } from 'vue-i18n.../plugin-vue-jsx'; import { viteMockServe } from 'vite-plugin-mock'; import path from 'path'; import vueI18n
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
