<>引言

记录在学习vue3.0是添加i18n国际化翻译功能以及遇到的问题。

<>问题

在vue3.0 中使引用 i18n 时一直报错原因:
请检查版本问题!请检查版本问题!请检查版本问题!目前我使用的"vue-i18n": “^9.0.0-beta.17”,版本开始兼容vue3.0。
//安装最新的版本 @next npm install vue-i18n@next
官网引用为 vue2.0版本的引用方式和挂载方式,因vue3.0 的 vue 导入方式为 import { createApp } from “vue”;
无法按传统直接挂载。

<>vue3.0中使用i18n记录

步骤1:安装vue-i18n
npm install vue-i18n@next
步骤2:创建language文件夹存放各版本语言变量
language 中 index.js
//语言 import { createI18n } from 'vue-i18n' //引入vue-i18n组件 // import { 引入的组件
export 出来的 变量} from 'vue-i18n' //注册i8n实例并引入语言文件 const i18n = createI18n({ locale
: 'ch', //默认显示的语言 messages: { ch:require('./ch.js'), //引入语言文件 en:require(
'./en.js') } }) export default i18n; //将i18n暴露出去,在main.js中引入挂载
language 中 ch.js
module.exports = { // 头部菜单 header_menu: { logout: '退出' } }
language 中 en.js
module.exports = { // 头部菜单 header_menu: { logout: 'sign out' } }
main.js中挂载
import { createApp } from "vue"; import App from "./App.vue"; import router
from "./router"; import store from "./store"; import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css'; import VueI18n from './language'
createApp(App) .use(store) .use(router) .use(Antd) .use(VueI18n) .mount("#app");
使用方式
//格式为 $t('变量') {{ $t('header_menu.logout') }}

技术
©2019-2020 Toolsou All rights reserved,
Vue.js入门(五)---在vue中使用echarts词云Pandas统计分析基础_数据处理(DataFrame常用操作)element UI dialog点击dialog区域外会关闭dialog应届毕业生看过来!Java面试经典77问,看完离工作就不远了关于蓝桥杯大赛,你应该了解的那些事!mysql 分区-key分区(五)海康威视-嵌入式软件笔试题PHP Redis 监听过期的 key 事件C语言循环语句笔记详解以及练习-折半查找算法、猜数字游戏JVM概述