VUE 3 动态加载中英文 + 不编译随时添加中英文

VUE 3 动态加载中英文 + 不编译随时添加中英文项目部署后需要随时增加中英文 每次加完就需要重新打包编译比较麻烦 所以需要采用不打包中英文文件的方式即把中英文文件放在 public 文件夹下 便于随时添加资源 这种方式的配置步骤如下 1 安装 i8n npm i vue i18n 2 在 public 文件下添加 lang 文件夹

大家好,我是讯享网,很高兴认识大家。

项目部署后需要随时增加中英文,每次加完就需要重新打包编译比较麻烦,所以需要采用不打包中英文文件的方式即把中英文文件放在public文件夹下,便于随时添加资源,这种方式的配置步骤如下:

1、安装i8n,npm i vue-i18n

2、在public文件下添加lang文件夹,并且添加zh.js、en.js资源文件


讯享网

3、在public的index.html文件中引用en.js和zh.js文件,这样zh和en就可以在项目中全局引用了

4、新建i18n.js文件,配置中英文的配置项

import { createApp } from 'vue' import App from '../App.vue' import { createI18n } from 'vue-i18n' const app = createApp(App) const lang_zh = zh; const lang_en = en; const message = { zh: lang_zh, en: lang_en } const i18n = createI18n({ legacy: false, //处理报错Uncaught (in promise) SyntaxError: Not available in legacy mode (at message-compiler.esm-bundler.js:54:19) locale: "zh", messages: message }) export default function (app) { app.use(i18n) }

讯享网

5、将I18n加入到main.js的配置项中

6、使用i18n

import { useI18n } from "vue-i18n";

const { locale, t } = useI18n();

例如:

 $t(wpCode)

小讯
上一篇 2025-01-09 08:25
下一篇 2025-01-04 18:20

相关推荐

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容,请联系我们,一经查实,本站将立刻删除。
如需转载请保留出处:https://51itzy.com/kjqy/20500.html