yhc-webpack-vuei18n-loader

<div>你好，世界</div>

//zh_cn.js
module.exports = {
  "a018615b35588a01": "你好，世界" //key是根据中文生成16的MD5
}

//en.js
module.exports = {
  "a018615b35588a01": "Hello, world" //key是根据中文生成16的MD5
}

npm i yhc-webpack-vuei18n-loader --save-dev

yarn add yhc-webpack-vuei18n-loader --dev

npx i18n generate -h
Usage: i18n generate [options] [src]


在 vue 下:  npx i18n generate

在 nuxt 下:  npx i18n generate '/pages' -p 'locale'

对src目录下的vue/js文件进行中文提取并生成国际化资源文件，默认src为执行目录下的src目录

Options:
  -p, --filepath <filepath>  设置国际化文件的路径，默认为执行目录下的src/locale目录，请务必设置一个单独的目录来放置国际化资源文件
  -f, --filename <filename>  设置生成文件的文件名，默认为 zh_cn，会自动添加.js 后缀
  -h, --help                 output usage information

const path = require('path');

module.exports = {
  //其他配置
  module:{
    rules:[
      {
        test: /\.vue$/,
        use: [
          {
            loader: 'vue-loader',
          },
          {
            loader: 'yhc-webpack-vuei18n-loader', //一定要作为第一个loader
            options:{
              localeFile: path.join(process.cwd(), 'src/locale/zh_cn.js') //与cli中相同，若生成的时候保持默认，则不需要配置
            }
          }
        ]
      },
      {
        test: /\.jsx?$/,
        include: [resolve('src')],
        use:[
          {
            loader: 'babel-loader',
          },
          {
            loader: 'yhc-webpack-vuei18n-loader', //一定要作为第一个loader
            options:{
              localeFile: path.join(process.cwd(), 'src/locale/zh_cn.js') //与cli中相同，若生成的时候保持默认，则不需要配置
            }
          }
        ]
      },
    ]
  }
}

module.exports = {
 
  // 将cdn的资源挂载到插件上
  chainWebpack(config) {

    //I18N 自动转换插件
     config.module
       .rule('i18n-vue')
       .test(/\.vue$/)
       .use('yhc-webpack-vuei18n-loader')
       .loader('yhc-webpack-vuei18n-loader')
       .end()

       .rule('i18n-js')
       .test(/\.js|\.jsx$/)
       // .include.add([resolve('src')])
       .use('yhc-webpack-vuei18n-loader')
       .loader('babel-loader')
       .loader('yhc-webpack-vuei18n-loader')
       .end();
  }
};

  注意：国际化文件放在 /locale/ 下
  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    transpile: [/^view-design/],
    extend(config, ctx) {
      config.module.rules.push(
        {
          test: /\.vue$/,
          loader: 'yhc-webpack-vuei18n-loader', //一定要作为第一个loader
          include: [path.resolve(__dirname, "pages")],
          exclude: [path.resolve(__dirname, "node_modules")],
          options:{
            localeFile: path.join(process.cwd(), 'locale/zh_cn.js') //与cli中相同，若生成的时候保持默认，则不需要配置
          }
        },
        {
          test: /\.js|\.jsx$/,
          include: [path.resolve(__dirname, "pages")],
          loader: 'babel-loader',
        },
        {
          //test: /\.jsx?$/,
          test: /\.js|\.jsx$/,
          include: [path.resolve(__dirname, "pages")],
          exclude: [path.resolve(__dirname, "node_modules")],
          loader: 'yhc-webpack-vuei18n-loader', //一定要作为第一个loader
          options:{
            localeFile: path.join(process.cwd(), 'locale/zh_cn.js') //与cli中相同，若生成的时候保持默认，则不需要配置
          }
        },
      )
    }
  },

//i18n.js 国际化配置文件
import Vue from 'vue';
import VueI18n from 'vue-i18n';
Vue.use(VueI18n);
Vue.config.lang = 'zh';
Vue.locale('zh', {
  ...require('./locale/zh_cn'),
});

//main.js 入口文件
import './i18n'
//...其他逻辑