第一种方法
- vue-i18n 需要自己写字库库很麻烦,而且不支持后端传值
第二种
- opencc 这个库前端去使用的时候 数据较多的情况非常慢.影响使用
第三种 language-hk-loader
- npm i language-hk-loader 从其他博客中看到的一种,很方便不需要写字库,但是在打包的时候去整体的去翻译了,无法做到手动点击去简体和繁体切换
language-hk-loader 动态点击切换思路
一. 打成两个包,点击切换的时候根据一个变量去切换路由,一个包使用插件 一个包正常简体
二. 第二种 打一个包 使用exclude 排除不需要使用翻译的文件,但是会每个页面都复制了一份,小项目无所谓
- 打包配置不需要的文件
{test: /\.(js|vue)$/,loader: 'language-hk-loader',//不需要文件夹exclude: [/schome/, /scloan/, /scquery/, /scTemplate/],},
- router配置
[
//这个时繁体路由{path: '/home',name: 'Home',component: () =>import(/* webpackChunkName: "home" */ '@/views/home/index.vue')},//简体路由{path: '/sc/home',name: 'scHome',component: () =>import(/* webpackChunkName: "schome" */ '@/views/sc/schome/index.vue')},
]
- 路由拦截
// 点击切换按钮的时候在本地存储了一个变量,然后每次根据这个变量去判断是跳转繁体路由还是简体路由
router.beforeEach((to, from, next) => {const path = localStorage.getItem('textType') ? localStorage.getItem('textType') : ''if (!to.path.includes('/sc') && path) {next(`${path}${to.path}`)} else {if (to.path.includes('/sc') && !path) {let str = to.pathconsole.log(str)const arr = str.split('/sc')return next(arr[1])}next()}
})
- 点击切换
//本地变量空值代表繁体,有值代表繁体,看个人爱好
if (this.text === '繁') {localStorage.setItem('textType', '')this.text = '简'} else {localStorage.setItem('textType', '/sc')this.text = '繁'}this.$router.go(0)
效果展示
