前端必会的nginx基础配置

一、部署在服务器根目录下

nginx关键配置

location / {
  root 服务器打包后的文件地址; // /home/websitw/html/dist
  index index.html;
  try_files $uri $uri/ /index.html; // 解决路由history模式刷新后404问题
  gzip_static on;
}

二、部署在服务器二级目录下

vue项目部署在二级目录下与部署在根目录下有些许差异。首先就是需要根据更改vue.config.js文件中pubilcPath的值，其次需要修改创建路由时createWebHistory('/web/'),具体代码如下：

// vue.config.js
module.exports = {
  ...
  publicPath: process.env.ENV == 'production' ? '/web.' : '/',
  ...
}
// route.js
let router = createRouter({
  history: createWebHistory('/web/'),
  routes: [
  ...
  // 路由
  ]
});

除此之外，nginx配置也需要做出相应调整:

location /web/ {
  alias 服务器打包后的文件地址; // /home/websitw/html/dist/ 若按照上述配置的话，则访问/web/目录里面的文件时，ningx会自动去/home/websitw/html/dist目录找文件。 注意这里用的是alias 不是root
  index index.html;
  try_files $uri $uri/ /web/index.html; // 解决路由history模式刷新后404问题
  gzip_static on;
}

修改完nginx配置后 nginx -s reload重启nginx即可使用域名+/web访问页面了。

三、nginx反向代理

如果前后端部署在不同的服务器上，则需要配置nginx反向代理。 首先，前端需要配置请求基础路径+proxy代理。

onst service = axios.create({
  withCredentials: true,
  baseURL: process.env.NODE_ENV == 'development' ? '/proxy' : process.env.VUE_APP_BASE_API+'proxy',
  timeout: 120000,
});

其次，修改nginx配置，直接在前端代理下面添加配置

 location ^~/proxy {
  proxy_pass 后端接口地址; // https://xxx.com
  proxy_http_version 1.1;
  proxy_set_header Host $host;
  proxy_set_header X-Real-IP $remote_addr;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

重启nginx配置，完成。