一、项目结构

小程序及web前端仓库&指引：点击前往

如果环境还未配置，请先查看【运行环境篇】

如下图，fe 项目主体是三个部分

• common包含了公用的配置
• mini包含了小程序项目的主体
• web包含了web项目的主体

二、构建编译

1、安装依赖

安装前，我们再次确认下我们的 node 版本和 npm 版本，短时间内，官方仍然推荐使用 v14及以下的 node 版本，最新版本的node，官方将很快适配，npm 推荐使用 6 及以下

我们上一步已经成功的安装好了 node 和 npm，但是 npm 自带的官方依赖源在国内网络环境下的访问并不通畅，这里我们选择使用腾讯云的国内源，来加速我们依赖的安装。

2、设置 npm国内腾讯云源站

npm config set registry http://mirrors.cloud.tencent.com/npm/

分别进入 web 目录和 mini 目录，安装 web 子项目和 mini 子项目的依赖

3、安装小程序依赖

我们这里进入 discuz-fe/mini 目录下，运行 npm install 来安装小程序的依赖

4、安装web项目依赖

同理，我们这里进入 discuz-fe/web 目录下，运行 npm install 来安装web项目的依赖

5、配置小程序相关配置

1） appid配置

appid 的配置文件位于 discuz-fe/mini 目录下的 project.config.json，修改其 appid 值为对应（微信小程序）的appid，这里对应的 appid 可以在微信小程序后台查询到。

2） 配置后台地址

在 discuz-fe/common/config 目录下，有 dev.js prod.js 两个问题，分别对应了 开发时 和 构建时 的后台 api 地址，这里我们可以通过编辑其中的 COMMON_BASE_URL 来修改其到我们的开发/生产服务器上

• 

• 

6、小程序开发模式

我们这里可以在 discuz-fe/mini 目录下运行 npm run dev ，进入小程序开发模式

7、小程序构建模式

同上，我们在同样的目录下，运行 npm run build，进入小程序构建模式

小程序构建模式下的产物，与小程序开发模式下的产物目录相同，都位于 discuz-fe/mini/dist

不同之处在于，小程序开发模式下，无法上传，因为其中涵盖了很多开发时的辅助信息，包体积大，只有在构建时，才能进行上传

8、开发者工具导入

在构建完成后，我们打开小程序开发者工具，导入 discuz-fe/mini/dist 目录，开发者工具可以自动识别对应的 appid

• 

• 

9、进行开发预览/上传

导入完成后，我们选择对应的小程序项目，就可以进入小程序开发者工具中进行开发或是上传，上传时我们需要在右上方的编译设置中进行如下设置

三、web项目开发/构建

以上阐述了小程序项目如何进行开发/构建，下面将继续用图文的方法，阐述web项目如何进行开发/构建

3.1 安装依赖

首先我们需要进入 discuz-fe/web 目录下，执行 npm i，进行依赖安装（注意事项参见上方小程序注意事项）

3.2 配置设置

web项目和小程序公用了一套后台请求配置，我们参见上方小程序的配置方法

3.3 开发模式

我们进入 discuz-fe/web 目录下，运行 npm run dev，即可进入开发模式

待到编译执行结束后，我们访问 http://localhost:9527 ，即可进行实时效果更新的开发

5.4 构建模式

我们进入 discuz-fe/web 目录下，运行 npm run static，即可执行构建，构建后产物位于 discuz-fe/web/dzq-default-web-static目录下

将构建后的产物，通过 ftp 上传至服务器，即可发布上线