discuzQ

选择 发行 >

也可以选择 发行 > 网站 – H5手机版，生成H5页面，然后上传到Discuz! Q的服务器上，覆盖原public目录下的index.html和static目录。

#不使用HBuilder

如果你对npm工具链比较熟悉，不想使用HBuilder X，也可以自己通过npm进行

#下载小程序代码

请下载小程序的最新代码，并解压缩到一个目录中。

进入解压缩后的目录，修改 .env.production 文件，将其中的服务器指向自己的Discuz! Q地址。

修改src下的manifest.json文件，将其中的小程序ID换成自己的小程序ID

然后执行：

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

npm install

npm run build:mp-weixin

建议使用环境如下：
node: 14.x.x
npm: 6.14.x
查看node版本：执行 node -v

查看npm版本：执行 npm-v

npm降级：执行 npm install npm@6.14.10 -g

小程序前端编译：
第一步：安装 Node.js 。

第二步：这里我选择 HBuilder X 做示范，因为比较好操作。

第三步：下载 DiscuzQ3.0 前端源码

下载网址： https://gitee.com/Discuz/discuz-fe

第四步：把文件拖到 软件 HBuilder X 里面。（如图）


执行 npm run build:weapp 的时候，会生成一个文件包为：mini/dist


调试H5的时候，由于H5资源来自本地，但API请求直接指向了远程的Discuz! Q，可能会遇到跨域访问的问题，请对Web服务器做相应的配置，允许来自 http://localhost:8080 的跨域访问。比如Nginx下，在原来的 location / 配置中，加入允许跨域的配置

  add_header 'Access-Control-Allow-Origin' 'http://localhost:8080';
  location / {
    if ($request_method = OPTIONS ) {
        add_header Content-Length 0;
        add_header Content-Type text/plain;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, PATCH, DELETE, PUT, OPTIONS';
        add_header 'Access-Control-Allow-Origin' 'http://localhost:8080';
        add_header 'Access-Control-Allow-Headers' 'Content-Type,Authorization';
        return 200;
    }
    try_files $uri $uri/ /index.php?$query_string;
  }

浏览器会在发现是跨域请求的时候，先向目标服务器发送一个OPTIONS请求作为跨域请求的测试(Test Flight)，这里的配置会返回给浏览器：『允许来自http://localhost:8080的跨域请求，允许使用GET, POST, PATCH, DELETE, PUT, OPTIONS这些方法』