访问自己做的网站吗,刘素云网站脱孝怎样做,义乌本地网站开发,绵阳市城乡建设和规划局网站文章目录 1. 在项目中创建一个国际化插件的文件i18n.ts2. 创建语言模块json3. 注册插件4. 语言切换组件5. 使用插件(ts中使用全局需注意点) 1. 在项目中创建一个国际化插件的文件i18n.ts
!-- plugins/i18n.ts --
export const i18nPlugin {install(app: any, option:… 文章目录 1. 在项目中创建一个国际化插件的文件i18n.ts2. 创建语言模块json3. 注册插件4. 语言切换组件5. 使用插件(ts中使用全局需注意点) 1. 在项目中创建一个国际化插件的文件i18n.ts
!-- plugins/i18n.ts --
export const i18nPlugin {install(app: any, option: any) {app.config.globalProperties.$t (key: string) {return key.split(.).reduce((o, k) {if (o) return o[k];}, option[localStorage.getItem(language) || zhCN]);} }
}2. 创建语言模块json
!-- assets/i18n/zh-CN.json --
{project: {projectName: 项目名称}
}
!-- assets/i18n/en-US.json --
{project: {projectName: project name}
}3. 注册插件
import zhCN from ./assets/i18n/zh-CN.json;
import enUS from ./assets/i18n/en-US.json;
import { i18nPlugin } from ./plugins/i18n;const app createApp(App);
app.use(i18nPlugin, {zhCN,enUS,
});4. 语言切换组件
!-- components/ChangeLanguage.vue --
templatea-select:valuelanguagechangechangeLanguagea-select-option valuezhCN中文/a-select-optiona-select-option valueenUSEnglish/a-select-option/a-select
/templatescript langtssetup
import {ref} from vue;// 将当前选择的语言存到localStorage中
const language ref(localStorage.getItem(language) || zhCN);
const changeLanguage (value: string) {language.value value;localStorage.setItem(language, value);window.location.reload();
};
/script
5. 使用插件(ts中使用全局需注意点)
templateChangeLanguage /
/template
!-- component.vue --
script langts setup
import { getCurrentInstance } from vue;
import SelectLanguage from /components/SelectLanguage.vue;// 通过getCurrentInstance()来获取当前组件实例
const instance getCurrentInstance();
// 从当前组件实例中获取全局的 $t 函数
const $t instance?.appContext.app.config.globalProperties.$t;// 调用全局的 $t 函数进行文本翻译
const translatedText $t(project.projectName);
console.log(translatedText);
/script
