VUE，HbuilderX开发H5页面，配置调试，部署以及JWT，Token。调用本机netcore接口
花了一周时间，测试了各种方式。对于VUE开发H5页面，然后部署到Nginx服务。再调用本地的HTTPS接口。
1、本地开发及使用IE或Chrome进行开发调试，并调用本地接口同步开发。
本地Netcore，开发按原有方式进行。
Hbuilderx，开发并调用本地接口。设置时，不要使用Https进行。直接用http即可。
Hbuilderx的manifest.json，配置如截图
pathRevrite的地方写了“^/api”:"/",在target上，必须要写“http://xxxx:43748/api”
1、本地开发及使用IE或Chrome进行开发调试，并调用本地接口同步开发。
本地Netcore，开发按原有方式进行。
Hbuilderx，开发并调用本地接口。设置时，不要使用Https进行。直接用http即可。
Hbuilderx的manifest.json，配置如截图
"h5" : {
"devServer" : {
"port" : 8080,
"disableHostCheck" : true,
"https" : false,
"hot" : false, // 热更新
"proxy" : {
"/api": {
"target" : "http://localhost:43748/api", // 你需要反向代理的域名或ip,可以设置本地IP地址和端口。
"changeOrigin" : false, //允许跨域
"secure" : false,// 设置支持https协议的代理
"pathRewrite" : {
"^/api" : "/"
}
}
}
},
"router" : {
"mode" : "history"
}
}
URL参数设置：UrlWXappTest:"/api/oauth/WXappTestAsync",///微信H5用户信息绑定(测试登录入口)
注意红色部分，设置时，设置为http模式。如果设置为https，会报跨域错误。注意/api的写法。}
URL参数设置：UrlWXappTest:"/api/oauth/WXappTestAsync",///微信H5用户信息绑定(测试登录入口)
pathRevrite的地方写了“^/api”:"/",在target上，必须要写“http://xxxx:43748/api”
2.重点介绍部署的时候，Nginx，及VUE要注意的地方。
VUE部分，只需要处理：proxy=>api=>target的部分，修改为Nginx需要访问的接口地址。比如http://www.abc.com。或者http://127.0.0.1:5010 ;
重点介绍Nginx的设置：
####### 顺风车H5访问###################
server {
listen 80;
server_name oncar.xxdmmj.com;
rewrite ^(.*)$ https://$host$1 permanent;
}
server {
listen 443 ssl ;
server_name oncar.xxdmmj.com;
#ssl证书地址
ssl_certificate /etc/ssl/certs/8449059_oncar.xxdmmj.com.pem;
#pem文件的路径
ssl_certificate_key /etc/ssl/certs/8449059_oncar.xxdmmj.com.key;
#key文件的路径
#ssl验证相关配置
ssl_session_timeout 5m; #缓存有效期
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4; #加密算法
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;#安全链接可选的加密协议
ssl_prefer_server_ciphers on; #使用服务器端的首选算法
ssl_session_cache shared:SSL:10m;
location / {
add_header 'Access-Control-Allow-Origin' $host;
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'HEAD, GET, POST, PUT, PATCH, DELETE, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,web-token,app-token,Authorization,Accept,Origin,Keep-Alive,User-Agent,X-Mx-ReqToken,X-Data-Type,X-Auth-Token,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
try_files $uri $uri/ /index.html;
root /www/wwwroot/xxdmmj_oncar; ##项目路径
index index.html;
rewrite ^.+(?<!js|css|png|map)$ /index.html break;
}
location ^~/api/{
add_header 'Access-Control-Allow-Origin' $host;
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'HEAD, GET, POST, PUT, PATCH, DELETE, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,web-token,app-token,Authorization,Accept,Origin,Keep-Alive,User-Agent,X-Mx-ReqToken,X-Data-Type,X-Auth-Token,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
proxy_pass http://127.0.0.1:5010;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {}
}
############## oncar.xxdmmj.com
####### 顺风车H5访问
蓝色部分，是设置JWT的token。红色部分特别注意：
try_files $uri $uri/ /index.html;
该设置是对Hbuilderx发布是生成H5的发布包时，只有index.html及static的静态文件包的模式，设置后，可以跳转页面。不设置会报“Please enable JavaScript to continue” 说是启动JAVAScript，其实不是。
rewrite ^.+(?<!js|css|png|map)$ /index.html break; 是对JAVA的一些解析会报“ XXXXXXXX token< ”错误。加上这句即可。
proxy_pass http://127.0.0.1:5010;这里与VUE中的target设置一致。（不一致是不可以的，会出现访问的时候，代理是转向了VUE的"devServer"中的target地址），这里可以换到其他的接口，但最好是不在同一台服务器。目前只测试了同一台服务器的时候。使用该方式，可以传递token。如果不是同一台服务器，同时又必须https访问。则可以修改这个地方和VUE的target为Https的访问即可。比如，本地调试，调用远程服务器的API接口。可以设置为https模式
注意：
在使用域名进行接口访问的时候(往往会部署在不同的服务器上，当然部署在同一服务器也可以。)：
VUE的target为："https://api.xxxxxx.com/api"的时候，在Nginx的 location ^~/api/{}中的 proxy_pass https://api.xxxxx.com;不要配/api
使用本地接口（http:127.0.0.1:5010）访问数据的好处是，不需要将接口暴露在外部（即，不用配外部域名，不设置外部访问，提高数据安全，但是本地netcore接口还是要运行，就是还是需要用“进程守护管理器”，对进程进行持续的运行）
nginx,的设置中，location ^~/api/{} 该内容必须配置。不配置将不能访问。
HbuilderX的manifest.json修改target后，要记得重启整个HbuilderX,否则，有可能出现不更新配置的情况
在使用域名进行接口访问的时候(往往会部署在不同的服务器上，当然部署在同一服务器也可以。)：
VUE的target为："https://api.xxxxxx.com/api"的时候，在Nginx的 location ^~/api/{}中的 proxy_pass https://api.xxxxx.com;不要配/api
使用本地接口（http:127.0.0.1:5010）访问数据的好处是，不需要将接口暴露在外部（即，不用配外部域名，不设置外部访问，提高数据安全，但是本地netcore接口还是要运行，就是还是需要用“进程守护管理器”，对进程进行持续的运行）
nginx,的设置中，location ^~/api/{} 该内容必须配置。不配置将不能访问。
HbuilderX的manifest.json修改target后，要记得重启整个HbuilderX,否则，有可能出现不更新配置的情况
