Skip to main content

Vue React 前端项目部署

概述​

在基于源码构建时，Rainbond 会识别项目根目录的 package.json 让你选择为 Node 前端项目，并选择使用 NPM 还是 YARN 构建项目。

项目定义​

nodestatic.json​

nodestatic.json 文件用于定义项目为 Node 前端项目，如项目内未定义则会默认添加，文件默认内容如下：

{
  "path": "dist"
}
info

该文件指定静态文件编译后的输出目录，默认是打包后输出到项目根目录 dist。如不是默认 dist 目录，需要在该文件中指定。

package-lock.json​

package-lock.json 文件用于定义该项目使用 NPM 进行构建项目，该文件不可与 yarn.lock 同时存在。

yarn.lock​

yarn.lock 文件用于定义该项目使用 YARN 进行构建项目，该文件不可与 package-lock.json 同时存在。

web.conf​

web.conf 文件用于定义 Nginx 配置文件，如不定义则会使用默认配置，如下：

server {
    listen       5000;
    
    location / {
        root   /app/www;
        try_files $uri $uri/ /index.html;
        index  index.html index.htm;
    }
}

部署示例​

源码部署 Vue Or React 项目​

  1. 基于源码创建组件，填写以下信息：
内容
组件名称自定义
组件英文名称自定义
仓库地址https://gitee.com/zhangbigqi/vue-demo.git or https://gitee.com/zhangbigqi/react-demo
代码版本main
  1. 选择为 Node 前端项目并指定使用 Npm 还是 Yarn 构建项目。
  2. 在组件构建源中切换 Node 版本至 16.15.0 保存并构建。