前端项目国际化解决方案

前端项目国际化解决方案

面向多语言文案管理的全栈示例:Vue 3 管理端 + Koa + MySQL 服务端 ,支持项目维度管理、词条增删改查、Excel 导入导出、翻译对比与简单数据看板;前端通过 vue-i18n 消费语言包,并可用脚本从服务端拉取 JSON 生成本地语言文件。

仓库结构

目录 说明
i18n-server/ Node.js(Koa)API、Sequelize/MySQL、静态资源与上传目录
i18n-app/ Vue 3 + Vite + Arco Design 管理界面与 vue-i18n

两个子目录各自为独立 npm 包,可分别安装依赖与启动;本地联调时需先起后端,再配前端代理

环境要求

  • Node.js :后端要求 ≥ 18(见 i18n-server/package.json);前端建议 Node 18+。
  • MySQL :与 i18n-server/dabaseConfig.js 中配置一致(默认库名 i18n_database)。
  • 包管理:下文以 npm 为例,亦可使用 yarn / pnpm

1. 数据库初始化

  1. 在 MySQL 中创建数据库,例如:

    sql 复制代码
    CREATE DATABASE i18n_database DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
  2. 按顺序导入 i18n-server/sql/ 下的建表脚本(或合并执行),至少包含:

    • i18n_project.sql
    • translate_dict.sql
    • i18n_upload_history.sql
  3. 修改 i18n-server/dabaseConfig.js 中的 库名、用户名、密码、主机、端口 ,使之与你的 MySQL 一致。开源前请勿提交真实生产库密码,建议改为环境变量或本地未跟踪的配置文件。

2. 启动后端(i18n-server)

bash 复制代码
cd i18n-server
npm install
npm run serve

默认监听 http://127.0.0.1:3000 (可通过环境变量 PORT 覆盖)。

其他脚本:

  • npm run dev:nodemon 热重载开发。
  • npm run prd:使用 pm2 启动(需全局安装 pm2)。

主要 API 前缀为 /i18n/app/ (见 i18n-server/routes/index.js),例如项目管理、词条 CRUD、导入导出、翻译文件获取等。

3. 启动前端(i18n-app)

bash 复制代码
cd i18n-app
npm install
npm run serve

默认开发服务器为 http://localhost:8081 (以 package.jsonvite --port 8081 为准)。

与后端联调

i18n-app/vite.config.js 中将请求代理到后端,请把 TARGET_URL 改成你本机或内网的后端地址,例如:

js 复制代码
const TARGET_URL = 'http://127.0.0.1:3000/'

前端 Axios 的 baseURL 为空,接口路径以 /i18n/app/ 开头,由 Vite 代理转发到上述 TARGET_URL

4. 从服务端拉取语言包(可选)

管理端之外,若要在业务前端工程里生成静态 JSON 语言包,可使用:

bash 复制代码
cd i18n-app
npm run getLanguage

脚本读取 src/locales/languageConfig.js,向服务端请求 getTranslateFiles 等配置。使用前请修改 其中的 ipportprojectCodeorigindatabase / file)等,与当前环境一致。

另有 npm run getNoTranslate 用于辅助扫描未翻译词条(见 src/locales/getNoTranslateScript.js)。

5. 构建与预览(前端)

bash 复制代码
cd i18n-app
npm run build
npm run preview

6. 代码风格

两个子项目均提供 Prettier:

bash 复制代码
npm run format        # 写入格式化
npm run format:check  # 仅检查

7. 仓库地址

i18n-app: gitee.com/icdong/i18n...

i18n-server: gitee.com/icdong/i18n...

许可证

请自行在仓库中添加许可证文件;在未声明前,本项目代码默认仍归原作者所有。

相关推荐
随风一样自由5 小时前
【前端独角兽】刚进入前端领域的前端开发用jQuery还是Vue3?
前端·javascript·vue3·jquery
IMPYLH5 小时前
HTML 的 <data> 元素
前端·html
YHHLAI6 小时前
[特殊字符] 面试中的 Promise —— 从入门到精通
前端·javascript·面试
kyriewen8 小时前
我扒了 GPT-5.6 的全部编程跑分——有一项 OpenAI 没敢放出来
前端·gpt·ai编程
前端H8 小时前
微前端 v3 架构升级:从加载隔离到状态协同
前端·架构·状态模式
陆枫Larry9 小时前
小程序包体积优化:用 SVG 图片替换 iconfont,并保留 CSS 控色能力
前端
环境栈笔记10 小时前
多账号浏览器选型检查清单:Profile、权限、Session 和任务日志怎么评估
前端·人工智能·后端·自动化
前端炒粉11 小时前
手写promise
java·前端·javascript
LaughingZhu11 小时前
智能体经典范式构建:ReAct、Plan-and-Solve 与 Reflection
前端·react.js·前端框架
jsonbro11 小时前
手把手带你实现发布订阅模式
前端·vue.js·设计模式