以react项目为例，理论上vue项目也支持。

  1. 打包。最好在package.json 里加上"homepage": "."，打包好后，会生成build目录
  2. 将build目录下的所有文件上传到服务器，假设放在/root/service/shop-h5/public 目录下
  3. 编写脚本，启动docker容器
#容器名，改在你喜欢的name=http-proxy-serverdocker rm -f $namedocker run -d --restart=always --name $name \ --restart=always \ -p 8080:8080 \ -e PROXY_PREFIX='/test' \ -e PROXY_TARGET='https://test.server.cn/api' \ -v /root/service/shop-h5/public:/public \ lengmianshi/http-proxy-server:1.0

说明：

  • PROXY_PREFIX：接口的前缀，类比http-proxy-middleware中的配置，本例表示所有以/test开头的请求都走代理。可以配置多个，用英文分号隔开，如/test;/prod
  • PROXY_TARGET：接口真实地址，即以PROXY_PREFIX开头的请求要转发的实际地址。可以配置多个，用英文分号隔开，如https://test.server.cn/api;https://prod.server.cn/api
  • 当PROXY_PREFIX和PROXY_TARGET包含多个值时，它们要一一对应：
    • 如PROXY_PREFIX=‘/test;/prod’，PROXY_TARGET=‘https://test.server.cn/api;https://prod.server.cn/api’，表示以/test打头的请求转发地址为https://test.server.cn/api，以/prod打头的请求的转发地址为https://prod.server.cn/api
  • /root/service/shop-h5/public：前端项目打包后build目录下的所有文件
  1. 容器启动后，浏览器输入：http://ip:port/index.html即可访问（记得开放端口）