首先介绍一下我借鉴的文章
https://www.jianshu.com/p/761616317998
这个方法遇到的问题就是打开app页面是白屏

解决方案

找到config文件夹中的index.js文件
将assetsPubilcPath:'/' 改为assetsPubilcPath:'./'

但是，却连接不上API接口
404~~~

方法二

下载hbuilder 将vue项目使用npm命令打包
npm run build------生成dist文件
导入右键转换成app

一样都是404

我也不清楚原因

此时访问的是穿透

第二天

更换穿透【使用的是免费版的所以，每天的域名都需要变更】
本地测试运行，发现Cannot Get/服务错误

将request模块重新导入
npm remove request
npm install requset
开跑~~~ [解决ok]

将配置还原

终于弄好了

之前访问接口的时候路径后面总是有#号 的原因，导致路径在手机浏览器中失败
将 mode:'hash',//add测试加载是否跳出404加上就好了

image.png

在History mode下，如果直接通过地址栏访问路径，那么会出现404错误，这是因为这是单页应用…
其实是因为调用了history.pushState API 所以所有的跳转之类的操作都是通过router来实现的，解决这个问题很简单，只需要在后台配置如果URL匹配不到任何静态资源，就跳转到默认的index.html。

若是遇到报错，请先修改，不然走不下去

测试样式

打包到手机上观看效果，css样式问题【较为麻烦】
安装http-server
npm install http-server -g
打开项目所在地cmd 输入http-server
若是提示错误。。请检查node配置

启动项目，开启http-server在手机输入访问地址即可

也有说需要连接在一个网络下。但是我开数据访问192.168.1.107:8081也是可以的