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 文件
    vue微信公众号项目 cli3+golang+nginx 本地开发环境搭建记录_第1张图片
    其他的项目配置,这里不说,只记录关于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 两个文件
    vue微信公众号项目 cli3+golang+nginx 本地开发环境搭建记录_第2张图片
    vue微信公众号项目 cli3+golang+nginx 本地开发环境搭建记录_第3张图片
    vue微信公众号项目 cli3+golang+nginx 本地开发环境搭建记录_第4张图片
    .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:来源于微信服务器
      vue微信公众号项目 cli3+golang+nginx 本地开发环境搭建记录_第5张图片

你可能感兴趣的:(golang,vue)