Using chinese-language-loader in Vue CLI to Avoid Forgetting Traditional-to-Simplified Conversion

The Problem

Users in mainland China are sensitive to seeing Traditional Chinese characters. When developing front-end pages, it is easy to forget to convert Traditional to Simplified Chinese and accidentally hard-code Traditional Chinese strings into HTML or JS files.

Evaluating the Package

The package does not score very high on Snyk, probably because of low usage. But after reading the source code, the underlying mechanism is a Traditional/Simplified mapping table for character conversion, so it should be safe enough to use.

Install chinese-language-loader

[GitHub link]

npm install chinese-language-loader --save --devs

Adjust vue.config.js

chainWebpack: config => {
    config.module
      .rule('language')
      .test(/\.(js|vue)$/)
      .use('chinese-language-loader')
      .loader('chinese-language-loader')
      .options({
        language: 'zh-CN'
      })
      .end()
      }

Result

At this point, Traditional Chinese in your .vue and .js files will be converted to Simplified Chinese during bundling.

Bonus: Convert Simplified to Traditional Chinese in JavaScript

import chineseLanguageLoader  from "chinese-language-loader/lib/main.js";
let str = chineseLanguageLoader('红豆生南国，春来发几枝。愿君多采撷，此物最相思。', {language: 'zh-TW'});
console.log(s2tResult)

// 紅豆生南國，春來發幾枝。願君多采擷，此物最相思。