第一种方法

• vue-i18n 需要自己写字库库很麻烦,而且不支持后端传值

第二种

• opencc 这个库前端去使用的时候 数据较多的情况非常慢.影响使用

第三种 language-hk-loader

• npm i language-hk-loader 从其他博客中看到的一种,很方便不需要写字库,但是在打包的时候去整体的去翻译了,无法做到手动点击去简体和繁体切换

language-hk-loader 动态点击切换思路

一. 打成两个包,点击切换的时候根据一个变量去切换路由,一个包使用插件 一个包正常简体
二. 第二种 打一个包 使用exclude 排除不需要使用翻译的文件,但是会每个页面都复制了一份,小项目无所谓

1. 打包配置不需要的文件

        {
                test: /\.(js|vue)$/,
                loader: 'language-hk-loader',
                //不需要文件夹
                exclude: [/schome/, /scloan/, /scquery/, /scTemplate/],
            },

2. 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')
  },
]

3. 路由拦截

// 点击切换按钮的时候在本地存储了一个变量,然后每次根据这个变量去判断是跳转繁体路由还是简体路由

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()
  }
})

4. 点击切换
   //本地变量空值代表繁体,有值代表繁体,看个人爱好

    if (this.text === '繁') {
        localStorage.setItem('textType', '')
        this.text = '简'
      } else {
        localStorage.setItem('textType', '/sc')
        this.text = '繁'
      }
      this.$router.go(0)

效果展示