vue-i18n一键国际化

这个资源很好，完全能够实现一键国际化,非常感谢这个作者，有需要的可以去下载资源
vue-i18n-tool:轻松对Vue组件进行国际化处理，自动生成多语言配置文件-源码

一键国际化源码大概分析并记录修改

1、安装运行的时候，报错

解决方案：我前面的node版本是11，后面换成16版本就好了

2、运行找不到文件问题

解决方案:更换运行的目录,
原因：fs模块读取文件的相对路径是以启动server.js的位置为基准的，而不是以server.js文件的位置，所以nodejs官方推荐在使用fs模块读取文件时使用绝对路径，而不是相对路径

// 注意：现在改为绝对路径
let PUBLIC_PATH = path.resolve(__dirname, '../public');

主要是对nodejs fs 模块读取文件不经问题没了解清楚

nodejs fs模块读取文件的路径问题

以下转载为上一篇文章

//获取node.exe的绝对路径
    console.log(process.execPath);//D:\nodejs\node.exe

    //存放当前文件（即server.js）文件夹的绝对路径
    console.log(__dirname);//D:\nodeTest\node_path\lib

    //当前文件（即server.js）的绝对路径
    console.log(__filename);//D:\nodeTest\node_path\lib\server.js

    //从所传入的文件路径（相对或绝对）中获取存放传入文件的文件夹的相对或绝对路径 
    //（例如 传入 public/home.html 则返回的是public）
    console.log(path.dirname(__filename));//D:\nodeTest\node_path\lib

    //执行当前脚本（即server.js）的位置 （例如 在根目录下执行 node ./xxx/xxx/a.js 则返回的是根目录地址 ）
    console.log(process.cwd());//D:\nodeTest\node_path\lib

    //'a/b/c'和'../src' 组合而成的绝对路径 文件或文件夹都行
    //例如 console.log(path.resolve('a/b/c', '../src'));//D:\nodeTest\node_path\lib\a\b\src
    console.log(path.resolve(__dirname, '../public'));//D:\nodeTest\node_path\public

    //'a/b/c'和'../src'组成的相对路径
    //console.log(path.join('a/b/c', '../src'));//a\b\src
    console.log(path.join(__dirname, '../public'));//D:\nodeTest\node_path\public

    //相当于path.resolve(__dirname, '../public/home.html')或path.join(__dirname, '../public/home.html')
    //但传入的必须是文件路径，而不是文件夹路径，而且当文件不存在时会抛出异常
    console.log(require.resolve('../public/home.html'));//D:\nodeTest\node_path\public\home.html

3、源码分析 （主要代码），源码需要在主要贡献者资源中下载

  async start() {
    const i18nSettings = {}
    const i18nContent = {}
    //1、遍历需要翻译的文件夹，得到文件列表
    const componentList= this.scanDir()
    const lang = this.config.to
    //2、遍历需要翻译的文件
    componentList.map(filePath => {
      //读取文件
      const content = fs.readFileSync(filePath, 'utf8')
      //获取文件名，主要区分vue,js的不同处理
      const extname = path.extname(filePath).slice(1)
      //获取国际化的key值
      const key = replaceMark(filePath, this.config.keyReplace)
      //最重要,解析为AST,并替换中文key
      const file = Processes[extname]({
        content,
        filePath,
        key
      })
  
      if (file.i18nList.length) {
        const data = {}
        file.i18nList.forEach(name => {
          data[name] = ''
        })
  
        i18nContent[key] = data
  
        const { content: fileContent, list: settingList } = contentReplaceKey(file.content, file.i18nList)
       //如果是js结尾的文件 添加import i18n from '@/lang';
       if(path.extname(file.filePath) == ".js"){
        file.content = "import i18n from '@/lang'"+'\n'+fileContent;
       }else{
        file.content = fileContent
       }
       
        
        i18nSettings[key] = settingList
      }
      //重新写入文件
      fs.writeFileSync(file.filePath, file.content)
    })
  
    //写入中文文件 zh.json
    this.tDict.writeLang('zh', generateZhDict(i18nSettings))

    const waitTranslateList = mergeDictBySettings(i18nSettings, this.tDict.exportSetingsByLang(lang), lang)
    const transList = await this.tApi.translateList(waitTranslateList, lang)
    handleWriteSettingsTranslate(i18nSettings, transList, lang)
  
    this.tDict.updateSettings(i18nSettings)
    this.tDict.updateLang(lang)
  }

英文翻译需要注册百度翻译并认证为开发者
百度翻译开放平台
并在配置文件中配置appid和token

4、源码修改

更改原因：
1、国际化在不同的位置，替换格式不一样

//vue组件模板的使用
<div>{{$t('message.zh')}}</div>
 
//vue组件模板数据绑定的使用
<input :placeholder="$t('message.zh')"></input>
 
//vue组件data中赋值的使用
data:{
 msg:this.$t('message.zh');
}
 
//js文件中赋值
import i18n from 'i18n.js';
 
console.log(i18n.t(text));

针对更改代码：


2、英文没有翻译的时候，en.js文件中没有值，我想没有翻译的时候，值为中文，方便后期修改翻译

5、效果展示

6、其他参考链接

https://github.com/xanke/vue-i18n-tool

https://github.com/laden666666/vue-i18n-tools