html5+app（将vue打包成为APP遇到的问题）

一、开发工具
开发工具建议使用HBuilderX(替代HBuilder)

HBuilderX使用HTML5来开发移动端APP非常方便,
创建项目和打包项目都很nice

不过打包次数有受限制,每天大概是7次左右.
二、发现的一些现象(经测试)

1、不存在跨域问题

HTML在打包成APP以后(经测试),在手机上可以实现跨域请求得到数据
然而在电脑上测试的时候,是存在跨域,因为跨域拦截是浏览器的行为.
数据已经发送出去，而且返回结果了，而浏览器是直接判断请求头的，
没有Access-Control-Allow-Origin，没有,则直接不显示结果，但在手机App上
就不会这样判断请求头了去拦截了。

2.在浏览器(如谷歌浏览器)上运行,和手机上运行的展示的对比

在功能实现上是没有什么区别的(注:手机上没有跨域限制),

但布局效果,确差很多,比如打开同一个页面(保持浏览器上的展示页面大小和手机一致),
可能会出现部分按钮,或者图片位置出现在页面不同的位置,甚至部分字体大小会出现差异,
(可能是缩放的原因).

所以在测试时,尽量使用真机测试,(HBuilderX内置浏览器还可以,就是查看控制台有点麻烦)

3.从手机端发送到后台的请求头(没有referer请求头)
也不能添加和修改referer请求头,我使用axios测试过了,无法修改Content-Type,referer,等
规定的常规请求头.(但可以添加一些不是浏览器规定的请求头,如下面的authorization请求头,就是我用axios修改的请求头)
4.运行打包以后测试项目(需要服务器)
本地运行服务器,可以 serve -p 8080 ,http-server -p 8080,nginx,tomcat

经测试简单测试 使用nginx和HBuilderX内置浏览器比较好，
也是比较接近打包成APP以后,安装到手机上的情况。
当然,有数据线的话,
还是直接在真机上测试的效果最好了

三、请求头（指已经在手机上运行的项目）
1.没有跨域的限制
也就是说:
即使在后端没有设置 Access-Control-Allow-Origin:*
也可以照样获取数据

注: 跨域限制和请求时的预检是浏览器的行为,在手机上不会对此做出限制

2.不能设置和修改某些请求头
这一点和浏览器是一样的
在手动设置和修改’referer’,'cookie’等请求头时均会被限制
报 Refused to set unsafe header ‘****’ 错误
但设置一些非w3c规定header的请求头时,是没有任何问题的
如: 在手机端常用Authorization请求头来传递token,来代替cookie

3.cookie
虽然不能手动设置cookie
但和常规浏览器一样
服务器发送的Set-Cookie,
仍然会以cookie的形式,自动添加到请求头里返回给后端

4.一个完整的请求头

四、打包vue项目
方法一(不推荐,但可以理解其原理)
在vue中项目里输入npm run build就可以打包成功了
然后会在该项目下生成一个dist文件（打包或的文件全在这里）

然后利用HBuilder将dist转为手机app
就可以直接将dist里的内容打包了

但安装到手机上以后确无法显示页面
(其实已经在index页面了,但由于路径错误无法加载css和js,导致页面空白)
后来仔细查看才知道
原来是inde.html出现错误

先看包路径

然后仔细看下面路径(index.html部分内容)

路径开头的前面全是"/",根本没有考虑,项目名dist(因为我是将整个dist包放在nginx下的,所有在
这里dist就相当于项目名)

前面在电脑上测试,没有带项目名              ..... /index.html
但到手机上以后需要携带项目名访问了    ..... /dist/index.html

所以上面的路径需要全部修改为下面这样(修改前面那种相对于根路径的写法,
使用相对于项目名的路径)

方法二 (添加下面内容以后,再打包)
vue-cli3项目打包时，静态资源请求失败 404
注: vue-cli3没有config文件解决方案，在根目录加上vue.config.js文件

//根目录新建 vue.config,js

module.exports = {
publicPath: "./"
}

更详细的配置方法
module.exports = {
//生成环境部署路径，默认为'/'
publicPath: process.env.NODE_ENV === 'production'
? './'     //可以填写项目名'myweb',但打包为app时设置为'./'.
: '/',
//当运行 build 时生成的生产环境构建文件的目录
outputDir:'dist',
//放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
assetsDir:'',
}

打包以后的效果图(不用再手动修改了)

另外注意:
一定要将下图router里的mode注解掉,要让url后面显示#,
否则在使用router-link to="/home"时,会改变url,

http://localhost:8080/dist/index.html   //index.html的页面路径
http://localhost:8080/home   //跳转以后,直接会跳到根路径下,将中间的项目名等去掉,导致后续跳转失败
http://localhost:8080/index.html#/home    //而将mode注解掉,后的跳转情况

但出现奇怪现象,经测试发现,
一些普通访问(跳转)是没有问题,
可能因为vue是单页面的原因吧!
其中css,js都已经全部加载出来了(相当于已经将动态页面加载出来了),
但访问在img下的静态图片时,会访问不到并出现空白的情况(因为采用相对路径,导致访问错误).