vue中vuex-i18n使用

最新推荐文章于 2026-05-02 08:57:15 发布

原创最新推荐文章于 2026-05-02 08:57:15 发布 · 2.2k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

个人专栏收录该内容

83 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中实现多语言国际化，通过使用vuex-i18n插件和JSON语言包，轻松切换英文、简体中文及繁体中文界面。

先给个项目地址源码所在 json 文件：： https://github.com/Tom-cy/mi_nj

npm i ~~
npm install vuex-i18n

使用 --我已经写好了js

import Vue from "vue";
import Vuex from 'vuex';
// 国际化语言
import vuexI18n from "vuex-i18n";

// 引入语言文件配置
let translationsUS = require("./i18n/en-US.json");
let translationsCN = require("./i18n/zh-CN.json");
let translationsTw = require("./i18n/zh-TW.json");

const store = new Vuex.Store({
    modules: {
        i18n: vuexI18n.store
    }
});

Vue.use(vuexI18n.plugin, store);

Vue.i18n.add("en-US", translationsUS);
Vue.i18n.add("zh-CN", translationsCN);
Vue.i18n.add("zh-TW", translationsTw);

Vue.i18n.set('en-US')
Vue.i18n.set('zh-CN')
Vue.i18n.set('zh-TW')

使用效果：
在这里插入图片描述