Vue.js — 教你如何在项目中配置国际化

haizou

已于 2023-01-17 15:42:44 修改

阅读量1.2k

点赞数 1

分类专栏： vue.js 文章标签： vue.js

于 2021-08-15 09:54:05 首次发布

本文链接：https://blog.csdn.net/zouhai1/article/details/119709768

版权

vue.js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文档详细介绍了如何在Vue3项目中结合vue-i18n库实现多语言切换功能，包括安装、配置i18n实例、创建语言包、在main.js中引入以及在模板中使用和切换语言的方法。通过示例代码，展示了如何设置中文和英文两种语言，并在页面中显示和切换。

摘要由CSDN通过智能技术生成

注意：本文使用的是 vue@3 + vue-i18n@9 的写法

一、安装

npm install vue-i18n@9 --save

二、新建 i18n 文件

文件目录结构如下：
在这里插入图片描述
在 index.js 下创建 i18n 实例

import { createI18n } from 'vue-i18n/index';
import zh from './lang/zh';
import en from './lang/en';

const i18n = createI18n({
    // 设置地区
    locale: localStorage.getItem('language') || 'zh',
    // 设置语言环境信息
    messages: {
        zh,
        en
    },
});

export default i18n;

然后分别创建 zh.js 和 en.js 的语言包

// zh.js
export default {
    message: {
        resume: '生活不止眼前的苟且'
    }
}

// en.js
export default {
    message: {
        resume: 'There is more to life than subsistence'
    }
}

三、在 main.js 中引入

import { createApp } from 'vue'
import App from './App.vue'
import i18n from './i18n';

const app = createApp(App);
app.use(i18n);

app.mount('#app');

四、在模板中使用

在模板中使用

<div class="content">
    {{ $t('message.resume') }}
</div>

写一个切换语言的方法

<template>
    <button @click="toggle">切换</button>
</template>

<script>
export default {
    methods: {
        toggle() {
            const curLang = localStorage.getItem('language');
            const setLang = curLang == 'zh' ? 'en' : 'zh';
            localStorage.setItem('language', setLang);
            location.reload();
        }
    }
}
</script>