CRMEB论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 314|回复: 5

[操作帮助] H5打包和调试

[复制链接]
发表于 2020-1-17 17:57:32 | 显示全部楼层 |阅读模式
本帖最后由 liaofei 于 2020-1-17 18:31 编辑

H5文件存放在CRMEB压缩包里面的根目录下的h5目录
h5源码放在本地打包,然后再上传服务器,服务器上不需要安装 nodejs,所有的开发工作只需要再本地进行

1.需要调试H5代码首先需要安装 node.js https://nodejs.org/en/ 官方下载地址
2.在H5根目录下运行命令行,如下图

windows 用户可以进入h5目录使用shift + 右击 点击[在此处打开 Powershell窗口]
mac进入命令行可参考下图 微信图片_20200117183049.png


进入命令行

微信图片_20200117173740.png
3.打开命令行后输入 npm install 或者 npm i 进行安装H5,如图
微信图片_20200117173816.png
正在安装中,安装中需要等待片刻
微信图片_20200117174041.png
安装完成
4.调试H5页面,再当前命令行输入 npm run serve,如图
微信图片_20200117174220.png
正在编译中

微信图片_20200117174254.png
编译完成

5. 复制编译完成后的链接放在浏览器上访问,目前请求的接口是当前访问的域名,这里我们需要修改请求地址
文件路径src\utils\index.js,如图
微信图片_20200117174628.png
红框中属于本地测试的一个域名,请更换成自己本地的域名,这样就可以成功访问接口

6.打包h5代码 npm run build

首先需要恢复 src\utils\index.js 文件中的修改,把刚注释的打开,新增的删除掉,如图

微信图片_20200117174958.png

然后输入 npm run build 进行打包

微信图片_20200117175238.png
打包中
微信图片_20200117175350.png
打包完成,打包好的文件存在再 h5/dist 文件夹下,把dist文件夹下的所有文件压缩打包,上传压缩包到服务器的 项目里面的public下进行解压


7.打包和调试完成








0

主题

24

帖子

316

积分

vip4

Rank: 4

积分
316
发表于 2020-1-17 23:08:08 | 显示全部楼层
3.打开命令行后输入 npm install 或者 npm i 进行安装H5,如图
错误
npm ERR! Unexpected end of JSON input while parsing near '...AwAE41206ry1QyNvlCyp+'
npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\***\AppData\Roaming\npm-cache\_logs\2020-01-17T15_02_06_773Z-debug.log

怎么操作
回复

使用道具 举报

0

主题

24

帖子

316

积分

vip4

Rank: 4

积分
316
发表于 2020-1-17 23:18:41 | 显示全部楼层
ych198802 发表于 2020-1-17 23:08
3.打开命令行后输入 npm install 或者 npm i 进行安装H5,如图
错误
npm ERR! Unexpected end of JSON input ...

进入下面这个文件夹清除cache
路径:C:/Users/PC/AppData/Roaming/npm-cache
执行:

npm cache clean --force

删除文件夹内容 这一步OK了
https://segmentfault.com/a/1190000015646531
回复

使用道具 举报

0

主题

24

帖子

316

积分

vip4

Rank: 4

积分
316
发表于 2020-1-18 00:15:28 | 显示全部楼层
按照此教程终于把H5编译学习下来了 谢谢楼主
回复

使用道具 举报

6

主题

18

帖子

279

积分

vip4

Rank: 4

积分
279
发表于 昨天 15:29 | 显示全部楼层
写的真好
回复

使用道具 举报

2

主题

32

帖子

562

积分

vip4

Rank: 4

积分
562
发表于 昨天 17:09 | 显示全部楼层
npm ERR! As of npm@5, the npm cache self-heals from corruption issues and data extracted from the cache is guaranteed to be valid. If you want to make sure everything is consistent, use 'npm cache verify' instead. On the other hand, if you're debugging an issue with the installer, you can use `npm install --cache /tmp/empty-cache` to use a temporary cache instead of nuking the actual one.
npm ERR!
npm ERR! If you're sure you want to delete the entire cache, rerun this command with --force.

npm ERR! A complete log of this run can be found in:
npm ERR!     D:\nodejs\node_cache\_logs\2020-02-28T09_08_05_983Z-debug.log

提示这个怎么操作啊
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|CRMEB论坛

GMT+8, 2020-2-29 05:12 , Processed in 0.025854 second(s), 22 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表