vue微信公众号项目 cli3+golang+nginx 本地开发环境搭建记录

本地开发需要解决的就是跨域的问题。

思路：

作为一个公众号项目，肯定是服务类的，所以前端需要 客户端 和 管理端，也就是说，我们开了两个vue项目。

• 客户端采用 vue 移动开发；
• 管理端需要处理很多信息和数据，手机处理也不方便，这里直接采用pc网页开发，用了 vue-admin（很棒的一个内容管理系统模板，广告一下。）

端口以及路径：

• 微信服务器：
  • 端口：本地开发使用ngrok内网穿透，默认将微信服务器发来的消息转发到后端的 7101 端口即可，不用通过nginx。
  • 路径：/mpapi/mp/xxx
• （前端1）管理端：
  • 端口：9529
  • 路径：/wxapi/v1/admin/xxx
• （前端2）客户端：
  • 端口：9530
  • 路径：/wxapi/v1/user/xxx
• （中间）nginx：
  • 端口：80
  • 连接前、后端通讯，将前端的 /wxapi/v1/admin/xxx 以及 /wxapi/v1/user/xxx 转发到后端7101端口
• （后端）go：
  • 端口：7101
  • 接收并处理 管理端(/wxapi/v1/admin/xxx) 、客户端(/wxapi/v1/user/xxx) 以及 微信服务器(/mpapi/mp/xxx) 发来的连接。

具体做法：

• 前端两个vue项目，可以使用webpack的代理功能，将数据发送到80端口；
• nginx代理的80端口，通过location判断收到的消息，转发到对应的后端；
• 后端go，正常开发，不需要做任何额外设置。

目的：

可以前、后端联合开发，不需要进行后期联调。
跨域的设置，由nginx完成。 后端不需要进行跨域设置，以免上线后忘记删代码，导致任何人都能调用接口。
项目build后，不需要再进行额外配置，直接本地测试。
比较适合小团队，小项目，特别是全栈程序猿一个人完成的。

具体实现：

一、使用cli3创建vue项目，这里不说了。

二、配置vue项目：

• 根目录创建 vue.config.js 文件
  
  其他的项目配置，这里不说，只记录关于webpack代理的代码，如下：

// 其他设置...
module.exports = {
	devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    proxy: {
      [process.env.VUE_APP_BASE_API]: {
        target: 'http://localhost' + process.env.VUE_APP_BASE_API,
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    }
  },
  // 其他设置...
}
// 其他设置...

• 根目录创建 .env.development 和 .env.production 两个文件
  
  
  
  .env.development 中的 VUE_APP_BASE_API 是开发环境的，
  .env.production 中的 VUE_APP_BASE_API 是线上环境的。
• 这里几个配置总的意思 就是将前端的数据代理到 localhost 下面，也就是默认的80端口。

三、配置nginx：

#... 其他配置 ...
server {
	listen       80; #监听80端口
	server_name  localhost; # 当前服务的域名
	root E:\\project\\y-ticket\\dist; 
	# 上面 root 配置，是将80端口的目录指向到 vue项目的编译目录，项目build以后，直接在浏览器输入 http://localhost 即可，无需其他额外配置

   location ^~/wxapi {
   	# 使用nginx处理跨域问题，后端就不需要配置了
   	add_header Access-Control-Allow-Credentials true;
   	add_header Access-Control-Allow-Origin http://localhost:9529,http://localhost:9530;
   	add_header Access-Control-Allow-Headers content-type,X-Requested-With;
   	add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;
   	if ($request_method = 'OPTIONS') {
   		return 200;
   	}

   	rewrite  ^/wxapi/(.*)$ /wxapi/$1 break; # 将80端口所有的 wxapi 连接重写
   	proxy_pass http://localhost:7101/;  # 转发后端的 7101 端口
   	# 前端一共有两个，分别是 /wxapi/v1/admin/xxx 以及 /wxapi/v1/user/xxx ，
   	# 这里只通过 wxapi 正则，就能将两个前端的连接同时处理，不需要写多个 location 了。
   }

}
#... 其他配置 ...

四、后端：

• 创建go项目、设定7101端口
• 可以用go的http自己实现，或者使用框架，我这里用的是beego api 模式。
• 项目中分配路由：
  • /wxapi/v1/admin/xxx：来源于管理端
  • /wxapi/v1/user/xxx：来源于用户端
  • /mpapi/mp/xxx：来源于微信服务器