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

2024-04-02 19:04:59 136人浏览八月长安

摘要

目录前言安装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 的值，还需要将当前语言存一份到本地缓存中。