第一种方法
- 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.path
console.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)
效果展示
