利用Vite2和Vue3实现网站国际化的全过程

目录
  • 前言
  • 安装vue-i18n
  • 配置Locales
    • 实现 getLangs.js
    • 创建 i18n 实例
  • 模板中使用
  • 语言切换
  • 关于切换后需要刷新后才生效
  • 切换语言触发其他组件更新
  • 总结

前言

最近有人在吐槽项目使用 Vue3 之后,出现一堆问题,填坑困难,甚至是开发中才发现某些第三方库没有推出 Vue3 的版本,因此大发吐槽,强烈建议不使用 Vue3。

做好技术预研和兼容性调查是开发前的工作之一,特别是对于新技术或者大版本的更新,除非你有十个胆,否则不要在预研不充分的情况下,在正式项目中使用。

最近在将自己的某个 Vue3 的项目接入国际化配置,整体的过程跟 Vue2 并没有太大的区别,在此做下技术经验分享。

安装vue-i18n

npm i vue-i18n --save

这里使用的是 vue-i18n 来实现国际化多语言切换,i18n 这个名字其实是由英文单词 internationalization 的首尾两个字母和中间的字符数 18 组成,意为「国际化」。

配置Locales

在项目 src 中新建 locales 文件夹,在里面新建 language 文件夹,用于存储各个语言的文本配置。language 中新建 en 和 zh-CN 文件夹,并对应的新建 index.js,填充以下内容:

// src/locales/language/zh_CN/index.js

export default {

    title: "中文标题",

}

// src/locales/language/en/index.js

export default {

    title: "English title",

}

实现 getLangs.js

在 locales 中新建 getLangs.js 文件,用于获取 language 文件夹中的语言包并暴露出去。
这里用到了 lodash-es 插件,你需要安装该插件:

npm i lodash-es --save

具体代码如下:

import { set } from 'lodash-es'

const modules = import.meta.globEager('./language/**/*.js')

function getLanguages(langs, prefix = 'lang') {

  const obj = {}

  Object.keys(langs).forEach((key) => {

    const mod = langs[key].default

    let k = key.replace(`./${prefix}/`, '').replace(/^\.\//, '')

    const lastIndex = k.lastIndexOf('.')

    k = k.substring(0, lastIndex)

    const keyList = k.split('/')

    const lang = keyList.shift()

    const objKey = keyList.join('.')

    if (lang) {

      set(obj, lang, obj[lang] || {})

      set(obj[lang], objKey, mod)

    }

  })

  return obj

}

const { language } = getLanguages(modules)

export default language

创建 i18n 实例

接下来需要创建 i18n 实例,并挂载到 Vue。在 locales 中新建 i18n.js。代码如下:

import { createI18n } from 'vue-i18n'

import messages from './getLangs'

export default createI18n({

  legacy: false,

  locale: window.localStorage.getItem("lang") || 'zh_CN',

  messages,

})

可以看到这里默认的语言配置是从浏览器中 localStorage 中获取的,没有则为 “zh-CN”。在切换语言后,需要将当前语言存起来,不然用户刷新,可就又回到默认语言配置了。
在 main.js 中引入:

import i18n from './locales/i18n'

const app = createApp(App)

app.use(I18n).mount("#app")

模板中使用

这里使用 composition api 的方式引入并使用,在模板对应的位置中,使用 t 函数获取当前语言配置下的展示文本,函数接收语言配置文件和属性的路径,通过点语法连接,如果找不到,则会将整个函数名称以字符形式展示。

<template>

<p>{{t(`index.title`)}}</p>

</template>

import { useI18n } from "vue-i18n";

export default {

    setup() {

        const { t } = useI18n();

        return { t }

    }

}

语言切换

常用的语言切换方式有两种,一种是将当前语言配置放到 url 上,切换语言即跳转到对应的路由,再展示当前语言下的对应文本。

第二种是无刷新/跳转的切换,将当前语言存储到本地缓存中,通过修改 vue-i18n 的 locale 的值切换语言。
这里推荐使用第二种,切换语言不需要刷新页面或者采用跳转的形式。

<template>

  <a

    href="javascript:;"

    @click="setLocals(locale === 'zh_CN' ? 'en' : 'zh_CN')"

  >

    {{ locale === 'zh_CN' ? '英' : '中' }}

  </a>

</template>

<script>

import { useI18n } from "vue-i18n";

import { ref } from "@vue/reactivity";

export default {

setup() {

    const { t, locale } = useI18n();

    const getLocals = () => window.localStorage.getItem("lang") || locale.value;

    const currentLocale = ref(getLocals());

    const setLocals = (lang = "") => {

      locale.value = lang;

      window.localStorage.setItem("lang", lang);

    };

    if (!window.localStorage.getItem("lang")) {

      setLocals(currentLocale.value);

    } else {

      if (currentLocale.value !== locale.value) {

        setLocals(currentLocale.value);

      }

    }

    return {

      t,

      locale,

      setLocals,

    };

  },

};
</script>

初始化的时候,先从本地获取当前语言,如果没有则获取默认的语言配置,切换语言时,不仅需要修改 locale 的值,还需要将当前语言存一份到本地缓存中。

关于切换后需要刷新后才生效

上面的例子,在模板中直接使用 t 函数渲染的文本,在语言切换时是无需刷新即可更新视图语言的,但如果是在 setup 中直接使用 t 函数,则不会立即更新,需要刷新后才生效。

这里不推荐在模板以外的地方使用 t 函数,如有必要,可以在组件中定义多语言文本,在模板中通过键值对的形式去访问。

切换语言触发其他组件更新

在一些场景中,页面展示的文本是通过外部获取的,无法直接由语言切换触发更新,需要实现类似兄弟组件的广播效果。

在 Vue3 中取消了 global bug 的使用,进而可以用 mitt 等插件代替。

总结

到此这篇关于利用Vite2和Vue3实现网站国际化的文章就介绍到这了,更多相关Vite2和Vue3网站国际化内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue 国际化 vue-i18n 双语言 语言包

    1.安装vue-i18n 2.在main.js里面引用 import VueI18n from 'vue-i18n' Vue.use(VueI18n) 3.实例化i18n,并配置默认的语言模式,以及对应的文件(也是在main.js里使用) 如下.cn 中文包对应的是cn.js en 对应的是英文 en.js 包 const i18n = new VueI18n({ //定义默认语言 locale: 'cn', messages:{ 'cn': require('./common/lang/cn'

  • Vue Element前端应用开发之界面语言国际化

    概述 VUE+Element 前端应用实现国际化的处理还是非常方便的,一般在Main.js函数里面引入语言文件,然后在界面上进行一定的处理,把对应的键值转换为对应语言的语义即可.本篇随笔介绍在VUE+Element 前端应用中如何实现在界面快速的支持多语言国际化的处理逻辑代码. 1.main入口函数支持 Element 组件内部默认使用中文,若希望使用其他语言,则需要进行多语言设置.以英文为例,在 main.js 中: // 完整引入 Element import Vue from 'vue'

  • vue项目中vue-i18n和element-ui国际化开发实现过程

    在vue构建的项目中,我们常用element-ui插件,在我的博客前面有讲述,具体怎么用vue-i18n插件进行国际化开发,但是在前面博客中,如果项目中使用了element-ui插件,插件中的语言文字替换可以结合element-ui插件一同进行.element-ui插件自身也提供了语言包.具体的配置和使用方法参考如下: 默认你已构建好了一个vue项目,在vue项目中安装vue-i18n以及element-ui插件 cnpm i vue-i18n --save-dev cnpm i element

  • vue使用vue-i18n实现国际化的实现代码

    需求 公司项目需要国际化,点击按钮切换中文/英文 1.安装 npm install vue-i18n --save 2.注入 vue 实例中,项目中实现调用 api 和 模板语法 import VueI18n from 'vue-i18n' Vue.use(VueI18n) ; const i18n = new VueI18n({ locale: 'zh-CN', // 语言标识, 通过切换locale的值来实现语言切换,this.$i18n.locale messages: { 'zh-CN'

  • vue使用i18n实现国际化的方法详解

    一.前言 在4k广告机中需要实现多语言切换,这时候接触到国际化,前端框架无数,其中几种热门的框架都有相匹配的国际化插件工具.比如: vue + vue-i18n angular + angular-translate react + react-intl jquery + jquery.i18n.property 在4K广告机项目中使用的前端框架为Vue,故而我们将使用vue-i18n这个插件进行国际化功能的实现. 二.最终实现效果 三.国际化的实现 1.首先在自己的项目中安装 vue-i18n

  • 使用vue 国际化i18n 实现多实现语言切换功能

    安装 npm install vue-i18n 新建一个文件夹 i18n ,内新建 en.js zh.js index.js 三个文件 准备翻译信息 en.js export default { home: { helloworld: "hello workd !" } }; zh.js export default { home: { helloworld: "你好世界" } }; index.js 创建Vue-i18n实例 import Vue from &qu

  • vue项目国际化vue-i18n的安装使用教程

    前言 项目需要支持多语言,我们需要提取出项目中使用的静态文本,使用语言包进行管理, 当切换语言设置的时候,可以自动切换整个项目的文字显示. 发现Vue项目中有对应的组件 vue-i18n ,而且对项目的代码修改不大,于是就使用了这个组件去修改项目中的代码.下面话不多说了,来一起看看详细的介绍吧. 安装 // script 引入 <script src="https://unpkg.com/vue/dist/vue.js"></script> <script

  • Vue下的国际化处理方法

    1:首先安装 Vue-i8n npm install vue-i18n --save 注:-save-dev是指将包信息添加到devDependencies,表示你开发时依赖的包裹. -save是指将包信息添加到dependencies,表示你发布时依赖的包裹. 2:在main.js中配置信息 import VueI18n from 'vue-i18n' import {getCookie} from './common/cookie' //引入一个js文件,使用引入的函数getCookie,根

  • vue.js国际化 vue-i18n插件的使用详解

    安装方法 1.使用CDN直接引用 <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script> 2.NPM $ npm install vue-i18n 3.Yarn $ yarn add vue-i18n 使用方法 在这里只介绍v

  • 利用Vite2和Vue3实现网站国际化的全过程

    目录 前言 安装vue-i18n 配置Locales 实现 getLangs.js 创建 i18n 实例 模板中使用 语言切换 关于切换后需要刷新后才生效 切换语言触发其他组件更新 总结 前言 最近有人在吐槽项目使用 Vue3 之后,出现一堆问题,填坑困难,甚至是开发中才发现某些第三方库没有推出 Vue3 的版本,因此大发吐槽,强烈建议不使用 Vue3. 做好技术预研和兼容性调查是开发前的工作之一,特别是对于新技术或者大版本的更新,除非你有十个胆,否则不要在预研不充分的情况下,在正式项目中使用.

  • 利用DataSet部分功能实现网站登录

    首先,我之前必须完成过注册,并把个人信息存入数据库中. 其次,这部分的个别对象是存于某些文档中的,需要引用命名空间. using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using ZG.Common;//后面用到ScriptHelper对象(ScriptHelper.cs

  • vite2.0+vue3移动端项目实战详解

    一.涉及技术点 vite版本 vue3 ts 集成路由 集成vuex 集成axios 配置Vant3 移动端适配 请求代理 二.步骤 vite+ts+vue3只需要一行命令 npm init @vitejs/app my-vue-app --template vue-ts 配置路由 npm install vue-router@4 --save 在src下新建router目录,新建index.ts文件 import { createRouter, createWebHashHistory, Ro

  • 利用Vite搭建Vue3+ElementUI-Plus项目的全过程

    目录 创建项目 初始化项目 添加依赖并运行 添加路由 添加依赖 添加路由配置文件 在main.js中添加路由 添加Home页面进行测试 添加ElementUI-Plus 安装element-plus依赖 引入element-plus依赖 引入Element Icon 添加依赖 修改element的主题颜色 总结 本文主要记录使用Vite搭建一个Vue3+ElementUI-Plus,以及集成Vue Router的过程.本次搭建过程的Nodejs版本为 V16.14.2 创建项目 初始化项目 使用

  • 网站国际化多语言处理工具i18n安装使用方法图文详解

    目录 一.首先安装i18n 二.创建语言包文件 三.main.js引入i18n 四.修改App.vue文件 五.页面使用 接下来继续完善,加上切换语言按钮 最后 使用方法,按照上图1234顺序即可 总结 一.首先安装i18n npm install --save vue-i18n 此时安装的是vue-i18n最新版本,项目跑不起来,后来换成8.27.1版本就好了 npm install --save vue-i18n@8.27.1 二.创建语言包文件 1.在src目录下创建i18n文件夹 2.在

  • 利用IIS最大连接数实现网站DOS(图)

    安全中国提示:本程序仅做为技术研究之用,请勿用于非法用途,否则,后果自负! 最近买了个空间来玩,各位勿笑,是入门级的虚拟主机(偶是穷人啊),各种参数都相当低,特别是IIS连接数,只有100个(也就是同时支持100个不同的访问). 这里就出现问题了.如果我一直对该网站进行连接,虽然我是同一个人,但是IIS却傻乎乎的把每次连接当成不同的人,每连接一次就会分配一个session给我,当连接超过服务器设置的IIS最大连接数目的时候--呵呵,拒绝服务就发生了. 具体的攻击嘛,我们当然是利用程序来完成.思路

  • 批处理利用HOSTS文件(屏蔽,加速)网站的代码

    复制代码 代码如下: @echo off&setlocal&cls echo/&echo\&echo=&echo]&echo[&echo+ :start set/p a=选择模式(1:屏蔽网站 2:加速访问 3:删除被屏蔽的网站 4:退出): if not defined a goto start if %a% equ 1 (echo/&goto a) if %a% equ 2 (echo/&goto b) if %a% equ 3

  • 如何利用IIS调试ASP.NET网站程序详解

    前言 在实际的开发当中,相信很多的开发者在开发调试ASP.NET网站时候都是直接通过Visual Studio工具的编译运行来调试的. 一般情况下,这种调试方式也不会有多少问题,但有时候我们会发现这样的一个情况,就是明明在本地调试运行都没有问题的网站,部署到服务器IIS上,就出现无法描述的线上问题.这时候,就要排除服务器环境是否跟本地环境一样,其中一点还要涉及到IIS的配置的排除. 那问题来了,我们能不能在开发的时候,就部署在IIS上调试,而不是直接使用Visual Studio的运行调试,这样

  • 利用IIS调试ASP.NET网站程序的完整步骤

    前言 在实际的开发当中,相信很多的开发者在开发调试ASP.NET网站时候都是直接通过Visual Studio工具的编译运行来调试的. 一般情况下,这种调试方式也不会有多少问题,但有时候我们会发现这样的一个情况,就是明明在本地调试运行都没有问题的网站,部署到服务器IIS上,就出现无法描述的线上问题.这时候,就要排除服务器环境是否跟本地环境一样,其中一点还要涉及到IIS的配置的排除. 那问题来了,我们能不能在开发的时候,就部署在IIS上调试,而不是直接使用Visual Studio的运行调试,这样

  • 利用docker搭建php7和nginx运行环境全过程(官方镜像)

    本文分享的是利用docker搭建php7和nginx运行环境的全过程,分享出来供大家参考学习,下面来看看详细的介绍: 环境介绍 根目录: /docker 网站根目录:/docker/www nginx相关目录:/docker/nginx/conf.d 准备工作 1.使用docker加速器 curl -sSL https://get.daocloud.io/daotools/set_mirror.sh | sh -s http://68abbefd.m.daocloud.io service do

随机推荐