vue3+ts使用vue-i18n

vue3+ts使用vue-i18n

1、安装插件

复制代码
npm install --save vue-i18n

yarn add vue-i18n

2、配置文件

locale/index.ts

ts 复制代码
import { createI18n } from 'vue-i18n'
import zhCN from './lang/zh-CN'
import enUS from './lang/en-US'

export const LOCALE_OPTIONS = [
  { label: '中文', value: 'zh-CN' },
  { label: 'English', value: 'en-US' },
];
const defaultLocale = localStorage.getItem('locale') || 'zh-CN';
const i18n = createI18n({
  locale: defaultLocale,
  legacy: false, // 解决控制台报错 Uncaught SyntaxError: Not available in legacy mode
  messages: {
    'zh-CN': zhCN,
    'en-US': enUS,
  }
})

export default i18n

locale/lang/zh-CN.ts

ts 复制代码
export default {
  'menu.list': '列表',
  'menu.message': '信息',
}

locale/lang/en-US.ts

ts 复制代码
export default {
  'menu.list': 'List',
  'menu.message': 'Message'
}

3、在main.ts引入

main.ts

ts 复制代码
import i18n from './locale'

// 在app.mount之前
app.use(i18n)

4、在页面中使用

html 复制代码
<template>
  <div>
    <ul>
      <li
        v-for="(item, index) in locales"
        :key="index"
        @click="changeLocale(item.value)"
      >{{ item.label }}</li>
    </ul>
    <p>{{ $t('menu.list') }}</p>
    <p>{{ $t('menu.message') }}</p>
    <p></p>
  </div>
</template>

<script setup lang="ts">
import { LOCALE_OPTIONS } from '@/locale'
import { useI18n } from 'vue-i18n'

const locales = [
  ...LOCALE_OPTIONS
]

const i18n = useI18n()
function changeLocale(value: string) {
  i18n.locale.value = value;
  localStorage.setItem('locale', value)
}
</script>

5、解决控制台报错/警告

5.1、需要配置全局变量

  • 警告信息

    You are running the esm-bundler build of vue-i18n. It is recommended to configure your bundler to explicitly replace feature flag globals with boolean literals to get proper tree-shaking in the final bundle.

  • 解决方案

vue.config.js

js 复制代码
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  chainWebpack: (config) => {
    config.resolve.alias
    .set('vue-i18n', 'vue-i18n/dist/vue-i18n.cjs.js')
  },
})

5.2、遗留模式报错

  • 报错信息

    Uncaught SyntaxError: Not available in legacy mode

  • 解决方案

ts 复制代码
import { createI18n } from 'vue-i18n'

const i18n = createI18n({
  ...
  legacy: false, // 解决控制台报错 Uncaught SyntaxError: Not available in legacy mode
  ...
})
相关推荐
ModyQyW9 分钟前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
说码解字16 分钟前
Kotlin lazy 委托的底层实现原理
前端
gnip37 分钟前
总结一期正则表达式
javascript·正则表达式
Q_9709563939 分钟前
java+vue+SpringBoo校园失物招领网站(程序+数据库+报告+部署教程+答辩指导)
java·数据库·vue.js
爱分享的程序员1 小时前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘1 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
vim怎么退出1 小时前
万字长文带你了解微前端架构
前端·微服务·前端框架
你这个年龄怎么睡得着的1 小时前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试
Java水解1 小时前
前端常用单位em/px/rem/vh/vm到底有什么区别?
前端
CAD老兵1 小时前
Vite 如何借助 esbuild 实现极速 Dev Server 体验,并支持无 source map 的源码调试
前端