使用vue国际化i18n实现多实现语言切换功能_VUE3实现多语言切换资源-CSDN下载

5星 · 超过95%的资源 101 浏览量 2021-01-19 18:05:57 上传评论收藏 35KB PDF 举报

资源详情

资源评论

资源推荐

使用使用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 "vue";

import VueI18n from "vue-i18n";

import enLocale from "./en";

import zhLocale from "./zh";

Vue.use(VueI18n);

const i18n = new VueI18n({

locale: localStorage.lang || "zh",

messages: {

en: {

...enLocale

},

zh: {

...zhLocale

}

}

});

export default i18n;

i18n 挂载到 vue 根实例

main.js

import Vue from "vue";

import App from "./App.vue";

import router from "./router";

import store from "./store";

import i18n from "./assets/i18n/index";

Vue.config.productionTip = false;

Vue.prototype.$i18n = i18n;

new Vue({

router,

store,

i18n,

render: h => h(App)

}).$mount("#app");

简单的使用

about.vue

<template>

<div class="about">

<h1>{{ $t("home.helloworld") }}</h1>

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

评论10

甜甜不加糖

2023-06-09

总的来说，这是一篇值得阅读的文章，很有参考价值。

内容反馈

weixin_38735899

粉丝: 2

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip