《Match-Trade 项目启动与配置教程》

1. 项目目录结构及介绍

Match-Trade 项目的目录结构如下：

match-trade/
├── .gitignore          # Git 忽略文件列表
├── Dockerfile          # Docker 构建文件
├── README.md           # 项目说明文件
├── config              # 配置文件目录
│   ├── dev.js          # 开发环境配置文件
│   └── prod.js         # 生产环境配置文件
├── dist                # 构建后的文件存放目录
├── package.json        # 项目依赖和配置
├── package-lock.json   # 项目依赖锁定文件
├── public              # 静态文件目录
│   └── index.html      # 项目入口 HTML 文件
├── src                 # 源代码目录
│   ├── assets          # 静态资源目录
│   ├── components      # 组件目录
│   ├── pages           # 页面目录
│   ├── router          # 路由配置目录
│   ├── store           # 状态管理目录
│   ├── utils           # 工具函数目录
│   └── App.vue         # 根组件
└── vue.config.js       # Vue 构建配置文件

目录说明：

• .gitignore: 指定 Git 忽略的文件和目录。
• Dockerfile: 用于构建 Docker 容器的配置文件。
• README.md: 提供项目的基本信息和说明。
• config: 包含项目的配置文件。
• dist: 构建后的静态文件存放目录。
• package.json: 记录了项目的依赖和配置信息。
• package-lock.json: 确保在不同的环境中安装的依赖版本保持一致。
• public: 存放静态文件，如入口 HTML 文件等。
• src: 源代码目录，包含项目的核心代码。
• vue.config.js: Vue 项目的配置文件。

2. 项目的启动文件介绍

项目的启动主要是通过 package.json 中的脚本完成的。以下是 package.json 中的启动脚本示例：

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "build:prod": "vue-cli-service build --mode prod",
  "build:dev": "vue-cli-service build --mode dev",
  "start": "node server.js",
  "test": "vue-cli-service test",
  "lint": "vue-cli-service lint"
}

启动命令：

• npm run serve: 启动开发服务器。
• npm run start: 启动生产环境的服务器。

通常情况下，开发人员会使用 npm run serve 命令启动本地开发服务器。

3. 项目的配置文件介绍

项目的配置文件位于 config 目录下，包括以下文件：

• dev.js: 开发环境配置文件。
• prod.js: 生产环境配置文件。

dev.js 文件示例：

module.exports = {
  // 开发环境配置
  devServer: {
    open: true, // 启动后自动打开浏览器
    host: 'localhost',
    port: 8080,
    proxy: {
      '/api': {
        target: '<API_URL>', // 目标 API 地址
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

prod.js 文件示例：

module.exports = {
  // 生产环境配置
  build: {
    // 生产环境构建的配置
  },
  devServer: {
    // 生产环境下无需配置开发服务器
  }
}

以上是 Match-Trade 项目的目录结构、启动文件和配置文件的简要介绍。开发者可以根据具体的项目需求，对配置文件进行相应的调整和优化。