vue history 微信公众号开发，微信授权，二级域名配置，NGINX，内网穿透

项目描述：前后端分离开发,此纪录只针对前端项目部署和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

公众号绑定开发者，用微信开发者工具打开就可以访问到你本地了

第一次做前后端分离的公众号开发，不对的地方指出，多多交流探讨