一、项目结构
小程序及web前端仓库&指引:点击前往
如果环境还未配置,请先查看【运行环境篇】
如下图,fe 项目主体是三个部分
- common包含了公用的配置
- mini包含了小程序项目的主体
- web包含了web项目的主体
![图片[1]-【构建编译篇】DZQ 前端编译构建指南-微看VCAN](https://www-vcan-1255523153.cos.ap-guangzhou.myqcloud.com/2021/07/20210718062341532-1024x777.png)
二、构建编译
1、安装依赖
安装前,我们再次确认下我们的 node 版本和 npm 版本,短时间内,官方仍然推荐使用 v14及以下的 node 版本,最新版本的node,官方将很快适配,npm 推荐使用 6 及以下
![图片[2]-【构建编译篇】DZQ 前端编译构建指南-微看VCAN](https://www-vcan-1255523153.cos.ap-guangzhou.myqcloud.com/2021/07/20210718062457426-1024x391.png)
我们上一步已经成功的安装好了 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](https://www-vcan-1255523153.cos.ap-guangzhou.myqcloud.com/2021/07/20210718062703506-1024x83.png)
4、安装web项目依赖
同理,我们这里进入 discuz-fe/web 目录下,运行 npm install 来安装web项目的依赖
![图片[4]-【构建编译篇】DZQ 前端编译构建指南-微看VCAN](https://www-vcan-1255523153.cos.ap-guangzhou.myqcloud.com/2021/07/20210718062741358-1024x233.png)
5、配置小程序相关配置
1) appid配置
appid 的配置文件位于 discuz-fe/mini 目录下的 project.config.json,修改其 appid 值为对应(微信小程序)的appid,这里对应的 appid 可以在微信小程序后台查询到。
![图片[5]-【构建编译篇】DZQ 前端编译构建指南-微看VCAN](https://www-vcan-1255523153.cos.ap-guangzhou.myqcloud.com/2021/07/20210718040721213-1024x764.png)
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](https://www-vcan-1255523153.cos.ap-guangzhou.myqcloud.com/2021/07/20210718063132119-1024x558.png)
小程序构建模式下的产物,与小程序开发模式下的产物目录相同,都位于 discuz-fe/mini/dist
不同之处在于,小程序开发模式下,无法上传,因为其中涵盖了很多开发时的辅助信息,包体积大,只有在构建时,才能进行上传
![图片[9]-【构建编译篇】DZQ 前端编译构建指南-微看VCAN](https://www-vcan-1255523153.cos.ap-guangzhou.myqcloud.com/2021/07/20210718063205676.png)
8、开发者工具导入
在构建完成后,我们打开小程序开发者工具,导入 discuz-fe/mini/dist 目录,开发者工具可以自动识别对应的 appid
9、进行开发预览/上传
导入完成后,我们选择对应的小程序项目,就可以进入小程序开发者工具中进行开发或是上传,上传时我们需要在右上方的编译设置中进行如下设置
![图片[12]-【构建编译篇】DZQ 前端编译构建指南-微看VCAN](https://www-vcan-1255523153.cos.ap-guangzhou.myqcloud.com/2021/07/20210718063737587-527x1024.png)
![图片[13]-【构建编译篇】DZQ 前端编译构建指南-微看VCAN](https://www-vcan-1255523153.cos.ap-guangzhou.myqcloud.com/2021/07/20210718063801707-1024x517.png)
三、web项目开发/构建
以上阐述了小程序项目如何进行开发/构建,下面将继续用图文的方法,阐述web项目如何进行开发/构建
3.1 安装依赖
首先我们需要进入 discuz-fe/web 目录下,执行 npm i,进行依赖安装(注意事项参见上方小程序注意事项)
3.2 配置设置
web项目和小程序公用了一套后台请求配置,我们参见上方小程序的配置方法
3.3 开发模式
我们进入 discuz-fe/web 目录下,运行 npm run dev,即可进入开发模式
![图片[14]-【构建编译篇】DZQ 前端编译构建指南-微看VCAN](https://www-vcan-1255523153.cos.ap-guangzhou.myqcloud.com/2021/07/20210718064015820-1024x303.png)
待到编译执行结束后,我们访问 http://localhost:9527 ,即可进行实时效果更新的开发
5.4 构建模式
我们进入 discuz-fe/web 目录下,运行 npm run static,即可执行构建,构建后产物位于 discuz-fe/web/dzq-default-web-static目录下
![图片[15]-【构建编译篇】DZQ 前端编译构建指南-微看VCAN](https://www-vcan-1255523153.cos.ap-guangzhou.myqcloud.com/2021/07/20210718064121355-1024x219.png)
![图片[16]-【构建编译篇】DZQ 前端编译构建指南-微看VCAN](https://www-vcan-1255523153.cos.ap-guangzhou.myqcloud.com/2021/07/20210718064138959-613x1024.png)
将构建后的产物,通过 ftp 上传至服务器,即可发布上线
👋 感谢您的观看!
资源解压密码:ipotato.chat
1 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
2 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
3 本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
4 本站资源统一解压密码:ipotato.chat
暂无评论内容