【构建编译篇】DZQ 前端编译构建指南

一、项目结构

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

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

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

  • common包含了公用的配置
  • mini包含了小程序项目的主体
  • web包含了web项目的主体
图片[1]-【构建编译篇】DZQ 前端编译构建指南-微看VCAN

二、构建编译

1、安装依赖

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

图片[2]-【构建编译篇】DZQ 前端编译构建指南-微看VCAN

我们上一步已经成功的安装好了 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 来安装小程序的依赖

图片[3]-【构建编译篇】DZQ 前端编译构建指南-微看VCAN

4、安装web项目依赖

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

图片[4]-【构建编译篇】DZQ 前端编译构建指南-微看VCAN

5、配置小程序相关配置

1) appid配置

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

图片[5]-【构建编译篇】DZQ 前端编译构建指南-微看VCAN

2) 配置后台地址

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

6、小程序开发模式

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

7、小程序构建模式

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

图片[8]-【构建编译篇】DZQ 前端编译构建指南-微看VCAN

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

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

图片[9]-【构建编译篇】DZQ 前端编译构建指南-微看VCAN

8、开发者工具导入

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

9、进行开发预览/上传

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

图片[12]-【构建编译篇】DZQ 前端编译构建指南-微看VCAN
图片[13]-【构建编译篇】DZQ 前端编译构建指南-微看VCAN

三、web项目开发/构建

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

3.1 安装依赖

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

3.2 配置设置

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

3.3 开发模式

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

图片[14]-【构建编译篇】DZQ 前端编译构建指南-微看VCAN

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

5.4 构建模式

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

图片[15]-【构建编译篇】DZQ 前端编译构建指南-微看VCAN
图片[16]-【构建编译篇】DZQ 前端编译构建指南-微看VCAN

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

© 版权声明
THE END
整理不易,点赞支持一下
点赞13 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容