# language-packer

**Repository Path**: Mo-jon_admin/language-packer

## Basic Information

- **Project Name**: language-packer
- **Description**: 翻译辅助小插件
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: https://www.npmjs.com/package/language-packer
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-07-30
- **Last Updated**: 2023-10-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: i18n

## README

# 安装插件

```
npm install language-packer
```

## 插件使用方法（以下以 Vue 使用为例，但不只限于 Vue 使用）

### 自动挂载 Vue.prototype.$t

```
import LanguagePacker from 'language-packer/index'

Vue.use(LanguagePacker, { list: [{ name: '中文', code: 'zh' }, { name: '英文', code: 'en' }] })
```

### 手动挂载 Vue.prototype.$t

```
import LanguagePacker from 'language-packer/src/index'

Vue.prototype.$t = LanguagePacker({ list: [{ name: '中文', code: 'zh' }, { name: '英文', code: 'en' }] })
```

#### LanguagePacker(options) options 配置说明

- list 语言选择列表，数据结构 [{ name: '中文', code: 'zh' }]
- code 默认语言（list 第一个）
- status 运行状态（false）
- autoKey 自动生成语言 key，采用 crc32 算法生成 （false）
- mark 检索标记（'`<$$$-LanguagePacker-$$$>`'）
- title 弹框标题（翻译）
- cancelBtnName 弹框取消按钮名称（取消）
- confirmBtnName 弹框确定按钮名称（确定）
- zIndex 弹框、翻译按钮层级（默认 666666）

## 设置语言

```
this.$t.setCode('zh')
```

## 开启（true）、关闭（false）翻译

```
this.$t.setStatus(true)
```

# 启用插件（以下 webpack 为例，vue-cli 在 configureWebpack 下配置）

```
const LanguageService = require('language-packer/src/service')

configureWebpack: {
    plugins: [
        new LanguageService()
    ]
}
```

## 翻译后不刷新浏览器，添加以下配置（文件变化导致热更刷新浏览器）

### vue.config.js 添加配置，ignored 忽略目录（LanguageService 配置的 outDir 目录）

```
configureWebpack: {
    devServer: {
      watchOptions: {
        ignored: [/src\/language/]
      }
    }
}
```

# 注意：LanguagePacker 一般在 main.js 中执行；LanguageService 以插件的方式挂载，两者必须同时使用。