vue项目发包及nginx的正反代理

171 阅读2分钟

项目发包:指的是将前端项目打包为dist文件放置在nginx.conf文件配置的访问路径下,通过服务器地址可以访问到该项目

1、前端vue项目的打包命令一般是npm run build,如果要分开打包部署的话,需要用到.env.plat文件

eg:

.env.plat文件

NODE_ENV=production

VUE_APP_URL=http://ip:端口
VUE_APP_ID=标记
VUE_APP_TYPE=用来标识

package.json文件

"scripts": {
    "start": "npm run serve",
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "build:plat": "vue-cli-service build --mode plat"
  },

此时可以使用npm run build:plat进行打包,此时打包到的服务器地址就会是.env.plat文件上的url地址,而npm run build 就是普通的打包

2、查看nginx.conf配置文件,项目访问的配置地址就是要发包的地址

eg:

项目发包文件夹:

image

nginx.conf文件:

image

3、nginx代理

代理属于中间商,代理通常表现出来是被代理的端的不能被另一端所识别,代理分为正向代理和反向代理,正向代理主要在客户端,反向代理主要在服务端。

正向代理:为客户端做事,隐藏客户端,访问服务端,让服务端不清楚一开始这个请求是由哪个客户端发起的,例如:vpn代理外网、或者是host文件修改、通常表现为一个无法访问的网站,通过一台服务器进行nginx代理变得可以访问。

反向代理:为服务端做事,隐藏服务端,客户端通过直接请求反向代理服务器去拿数据,并不知道这个请求最终是由哪一个服务器去处理的,例如:url请求转发、proxy_pass对本地的请求进行反向代理到其他可ping的服务器地址。

mac系统推荐发包工具: imageimage

window系统推荐发包工具: image