项目描述：前后端分离开发,此纪录只针对前端项目部署和vue打包配置
1.第一步微信公众号配置==>网页授权域名
配置的网页授权域名指向访问页面的服务器部署地址
image.png
2.Nginx 目录下 conf 修改 nginx.conf 配置，添加一个server, 映射一个域名，这个域名就是同上一个网页授权域名一致的。
# 微信端入口
server {
listen 80;
server_name xx.xxx.com.cn;
location / {
root wechat/mobile;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
}
如果前端项目部署在同一个域名下的如：v1和v2两个项目路径，这种情况用history模式会造成刷新404或者无法打开的情况.尝试了很多方法无解了，因为v1,v2这个访问的路径没有在路由里面。
server {
listen 80;
server_name xx.xxx.com.cn;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
location / {
proxy_pass http://127.0.0.1:8080;
proxy_set_header Host $host:${server_port};
}
location /v1/{
root saleAdmin;
index index.html;
}
location /v2/{
root saleAdmin;
index index.html;
}
}
3.vue 项目打包配置.vue 版本2.x
config\index.js
mode: 'history', //去掉url中的#
为什么要去掉#？因为不去掉# ,微信授权回调地址的时候会将#去掉，导致回调地址变成
http://www.xxx.com/?code=xxxx/#/index
但是我们希望得到的回调地址是
http://www.xxx.com/#/index?code=xxxx
我们要拿这个code去调用后端同学的接口获取用户的openId
还有一个原因是history模式可以解决以后做微信分享，避免微信分享出去的地址携带#导致的一直系列问题（目前还没有遇到这种问题，后面遇到了，我会接续完善这篇帖子）
划重点，如何本地调试vue微信公众号项目，这个very nice，免得本地无法调试
1.准备NATAPP注册，登陆，免费隧道 https://natapp.cn/，一波操作5分钟搞定
image.png
2.将natapp建立的这个地址复制出来，配置到微信授权域名中去，保存的时候，微信要验证你这个域名下是否有这个文件，先不要保存，下一步
image.png
3.先搞个本地nginx端口配置80 把txt文件从微信公众号拿下来，放到nginx访问目录，本地启动nginx,然后去微信公众号保存。如果还是保存失败，说明你natapp或者nginx其中一个肯定有问题。
4.上一步搞定了来搞vue
config\index.js文件 两个设置
port: 80
showEslintErrorsInOverlay: false,//不检查本地host
dev: {
env: require("./dev.env"),
assetsSubDirectory: "static",
assetsPublicPath: "/",
proxyTable: {
"/api": {
target: "xxx", // 接口的域名
secure: false, // 如果是https接口，需要配置这个参数
changeOrigin: true, // 如果接口跨域，需要进行这个参数配置，为true的话，请求的header将会设置为匹配目标服务器的规则（Access-Control-Allow-Origin）
pathRewrite: { "^/api": "" } //本身的接口地址没有 '/api' 这种通用前缀，所以要rewrite，如果本身有则去掉
}
},
host: "localhost", // can be overwritten by process.env.HOST
port: 80, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: true,
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
useEslint: false,
//这里这里这里加东西
showEslintErrorsInOverlay: false,
devtool: "cheap-module-eval-source-map",
cacheBusting: true,
cssSourceMap: true
},
现在 npm run dev 跑起来 直接访问natapp的地址
http://xxasdsa.natappfree.cc
image.png
公众号绑定开发者，用微信开发者工具打开就可以访问到你本地了
第一次做前后端分离的公众号开发，不对的地方指出，多多交流探讨
