//i18n-setup.jsimport Vue from 'vue'import VueI18n from 'vue-i18n'import messages from '@/lang' // 语言包的地址，随项目本身设置修改import axios from 'axios' // 根据项目中使用api请求模块去设置，不一定是axiosVue.use(VueI18n)export const i18n = new VueI18n({ locale: 'en', // set l...
而且如今的 chatgpt 等软件已经让优质批量化翻译变得简单易用,这篇文章就简单讲讲如何使用多语言框架 vue-i18n 在vue 项目中添加多语言。 安装 在vue 项目中使用如下进行安装: npm install vue-i18n 框架部署 在项目中部署 vue-i18n 比较坑,因为内网和外网大部分关于 vue-i18n 的教程都有点过时了,而且并没有...
// 设置默认语言fallbackLocale:'en',// 设置备用语言messages:{en,zh,},});constapp=createApp(App);// 使用i18n插件app.use(i18n);app.mount('#app');
vue实例中我们可以使用this.$i18n.t,这里的this是vue的实例,那项目中的很多js代码在vue的实例之外。最简单的方法就是咋需要 使用的地方手动直接import i18n 这样在vue实例中使用this.$i18n.t,如果不是就先import ,使用i18n.t,这样显然复杂了。 为了解决这个问题,最直接的办法就是把i18n直接挂载在window下,变成全...
</template> import { useI18n } from'vue-i18n'const { t }= useI18n()//国际化 const langOptions = ref([ {label: "English", value: 'en'}, {label: "中文", value: 'zn'}, ]) const optionsValue = ref(localStorage.getItem('language')) function handleUpdateValue(lang...
Vue.use(VueI18n) 1. 2. 3. 4. 5. 二、使用 在src 下创建 lang 文件夹。 1、准备语言包 本例我准备了两种语言包,分别是中文和英文:zn、en。在 lang 下创建两个文件,zn.js 和 en.js。 // zn.js export default { main:{ message:"消息", ...
import{createI18n}from"vue-i18n";importenfrom"./en";importzhfrom"./zh";consti18n=createI18n({locale:'zh',//设置本地语言messages:{zh:zh,en:en}})exportdefaulti18n 项目中的main.ts中 importi18nfrom'./i18n'app.use(i18n) 使用 {{$t('home.country')}}//vue template中使用 ...
然后在<template>里就可以 {{ $t("message.hello") }} 从中可以看到,使用Vue I18n要准备三件事情 资源文件 创建VueI18n对象,指定语言和资源 作为插件挂到全局Vue上 代码结构 代码其实并不多,tree -F一下,一共就10个文件。 │__directive.js │__extend.js ...
安装vue-i18n 创建一个ts文件用于存储各种翻译image.pngglobalLang.ts的内容如下: 在main.ts中全局引入 使用方式 < template >...
Vue使用i18n实现国际化(多语言) 以Vue2为例 先看效果: 安装i18n npm install vue-i18n 1. 创建语言包文件 可以在任意位置创建,这里为了整齐,先在src目录下创建了locale文件夹,里面创建了index.js src/locale/index.js import Vue from 'vue' import VueI18n from 'vue-i18n'...