vue-----vue-18n多语言处理，实现国际化

最新推荐文章于 2024-10-06 01:12:08 发布

cx&lavender

最新推荐文章于 2024-10-06 01:12:08 发布

阅读量1.1k

点赞数 1

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

本文链接：https://blog.csdn.net/m0_57391092/article/details/120856672

版权

本文详细介绍了如何利用vue-i18n插件在Vue.js项目中实现多语言切换，满足后台管理系统国际化需求。包括安装依赖、在main.js中配置、创建语言文件、在页面中使用翻译以及全局切换语言的方法。

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

需求：后台管理系统中要求页面国际化，页面语言能够进行切换，满足不同地区用户需求。

可以借助vue-i18n插件来实现这个需求

vue-i18n国际化插件：实现语言切换

使用：

一、安装依赖

npm install vue-i18n

二、main.js文件中导入、配置（配置也可写在一个单独的i18n.js文件中）

import Vue from "vue";
import App from "./App";
import router from "./router";
import VueI18n from "vue-i18n";
Vue.config.productionTip = false;


Vue.prototype.$echarts = echarts;
Vue.use(VueI18n); // 通过插件的形式挂载
/* eslint-disable no-new */
//实例化vue-i18n
const i18n = new VueI18n({
  // 从本地存储中取，如果没有默认为中文，
  // 这样可以解决切换语言后，没记住选择的语言，刷新页面后还是默认的语言
  // 设置默认语言
  locale: localStorage.getItem("locale") || "zh-CN", // 语言标识
  messages: {
    "zh-CN": require("./locales/zh.json"), // 中文语言包
    "en-US": require("./locales/en.json"), // 英文语言包