跳到主要内容
支持地域：上海

部署指南

基础配置​

部署配置项展示

部署配置

项目信息​

在开始部署前，需要填写以下配置项：

配置项说明示例是否必填
项目名称自定义项目名称，用于标识部署项目my-project是
项目预设框架选择项目使用的前端框架React、Vue、Angular是
Node.js 版本选择构建时使用的 Node.js 版本Node.js 18是
目标目录需要构建的代码所在目录，留空默认为根目录/frontend否

构建和部署配置​

配置项说明示例是否必填
安装命令安装项目依赖的命令npm install是
构建命令编译构建项目的命令npm run build是
构建产物目录构建完成后的输出目录./dist是
部署路径部署到服务器的路径，默认为根路径 // 或 /app否
配置说明
  • 目标目录：如果您的前端代码在 monorepo 项目的子目录中，可以指定该目录路径
  • 构建产物目录：相对于项目根目录或目标目录的路径，通常为 dist、build 等
  • 部署路径：指定网站在服务器上的访问路径，默认按项目名称生成相对路径，例如 /my-project

支持的 Node.js 版本​

系统支持以下 Node.js 版本：

  • Node.js 16
  • Node.js 18
  • Node.js 20
  • Node.js 22
  • Node.js 24
版本选择建议

建议选择与本地开发环境相同的 Node.js 版本，避免因版本差异导致的构建问题。

配置示例​

React 项目（Vite）：

项目名称: my-react-app
项目预设框架: React
Node.js 版本: Node.js 18
目标目录: (留空)
安装命令: npm install
构建命令: npm run build
构建产物目录: ./dist
部署路径: /my-react-app

Vue 项目（Vue CLI）：

项目名称: my-vue-app
项目预设框架: Vue
Node.js 版本: Node.js 18
目标目录: (留空)
安装命令: npm install
构建命令: npm run build
构建产物目录: ./dist
部署路径: /my-vue-app

高级配置​

环境变量​

支持配置构建时的环境变量，常用于区分开发/生产环境：

# 示例
NODE_ENV=production
VITE_API_URL=https://api.example.com
REACT_APP_ENV=production

目标目录说明​

目标目录用于指定需要构建的代码所在位置，适用于以下场景：

  1. Monorepo 项目：前端代码在子目录中

    目标目录: /packages/web

  2. 多应用项目：项目包含多个应用

    目标目录: /apps/admin

  3. 独立前端目录：前端代码在单独的文件夹

    目标目录: /frontend
注意

如果项目代码在根目录，请将目标目录留空或填写 /

常见前端框架部署配置​

React​

Create React App​

# 安装命令
npm install

# 构建命令
npm run build

# 构建产物目录
./build

package.json 示例：

{
  "scripts": {
    "build": "react-scripts build"
  }
}

控制台配置：

项目预设框架: React
安装命令: npm install
构建命令: npm run build
构建产物目录: ./build

Vite + React​

# 安装命令
npm install

# 构建命令
npm run build

# 构建产物目录
./dist

vite.config.js 配置：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  base: '/', // 如果部署在子目录，需要修改此项
  build: {
    outDir: 'dist',
    assetsDir: 'assets'
  }
})

控制台配置：

项目预设框架: React
安装命令: npm install
构建命令: npm run build
构建产物目录: ./dist

Vue​

Vue CLI (Vue 2/3)​

# 安装命令
npm install

# 构建命令
npm run build

# 构建产物目录
./dist

vue.config.js 配置：

module.exports = {
  publicPath: '/', // 部署路径
  outputDir: 'dist',
  assetsDir: 'static',
  productionSourceMap: false
}

控制台配置：

项目预设框架: Vue
安装命令: npm install
构建命令: npm run build
构建产物目录: ./dist

Vite + Vue​

# 安装命令
npm install

# 构建命令
npm run build

# 构建产物目录
./dist

vite.config.js 配置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  base: '/',
  build: {
    outDir: 'dist'
  }
})

控制台配置：

项目预设框架: Vue
安装命令: npm install
构建命令: npm run build
构建产物目录: ./dist

Angular​

# 安装命令
npm install

# 构建命令
npm run build

# 构建产物目录
./dist/项目名称

angular.json 配置：

{
  "projects": {
    "your-project": {
      "architect": {
        "build": {
          "options": {
            "outputPath": "dist/your-project"
          }
        }
      }
    }
  }
}

控制台配置：

项目预设框架: Angular
安装命令: npm install
构建命令: npm run build
构建产物目录: ./dist/your-project
提示

Angular 项目的输出目录通常包含项目名称，请根据实际项目配置调整。

部署路径配置​

根路径部署​

如果网站部署在域名根路径（如 https://example.com/），部署路径保持默认值 / 即可。

文件覆盖风险警告

根路径部署会将构建产物直接部署到静态托管的根目录 /，这意味着：

  1. 已有文件将被覆盖：根目录下与构建产物同名的文件会被新部署的文件覆盖
  2. 多项目冲突：如果在同一个静态托管环境中部署多个项目到根路径，后部署的项目会覆盖先前的项目文件
  3. 无法回滚单个文件：覆盖后的文件无法自动恢复

建议做法：

  • 如需在同一静态托管环境部署多个项目，为每个项目分配独立的子路径（如 /app1、/app2）
  • 生产环境部署前，建议先在测试环境验证
  • 重要项目部署前，建议先备份现有文件

根路径部署适用场景​

根路径部署适合以下情况：

  • 单一应用，独占整个静态托管环境
  • 官网、产品主页等需要域名直接访问的场景
  • 已确认不会与其他项目冲突的情况

子路径部署​

如果网站部署在子路径（如 https://example.com/app/），需要：

  1. 在控制台配置：将部署路径设置为 /app
  2. 在项目配置中设置 base 路径：

Vite 项目​

// vite.config.js
export default defineConfig({
  base: '/app/',
  // ... 其他配置
})

Vue CLI 项目​

// vue.config.js
module.exports = {
  publicPath: '/app/',
  // ... 其他配置
}

Create React App​

// package.json
{
  "homepage": "/app"
}

Angular 项目​

// angular.json
{
  "projects": {
    "your-project": {
      "architect": {
        "build": {
          "options": {
            "baseHref": "/app/"
          }
        }
      }
    }
  }
}
注意

部署路径配置必须与项目配置文件中的 base/publicPath/homepage 保持一致，否则会导致资源加载失败。