nginx 配置 vue3

### 如何配置 Nginx 支持 Vue3 项目部署 为了使 Nginx 正确支持 Vue3 应用程序，特别是当应用程序使用 `vue-router` 的 history 模式时，需要特别注意 Nginx 配置中的几个方面。 #### 创建自定义 Nginx 配置文件 在 `/etc/nginx/conf.d/` 目录下创建一个新的配置文件用于特定的 Vue3 项目设置[^3]。这有助于保持配置条理清晰并便于管理不同应用之间的差异。 #### 设置服务器块 (Server Block) 对于大多数情况而言，基本的服务器区块应如下所示： ```nginx server { listen 80; server_name your_domain_or_ip; location / { root /path/to/vue/dist; # 替换为实际打包后的 dist 文件夹位置 index index.html index.htm; try_files $uri $uri/ /index.html; # 上述指令确保即使刷新页面也能正确加载单页应用(SPA)，而不是返回404错误 } } ``` 这段配置指定了监听端口和服务名，并通过 `try_files` 指令处理 SPA 路由问题，使得无论用户访问哪个 URL 地址都能被重定向至 `index.html` 进行路由解析[^2]。 #### 处理 API 请求转发 如果前端代码中有向后端发起 HTTP 请求的情况，则还需要考虑如何让这些请求能够到达正确的服务端点。可以通过修改 Nginx 配置来实现这一点： ```nginx location ^~ /api/ { proxy_pass http://backend_server_address/; proxy_set_header Host $host; proxy_set_header X-IP $remote_addr; } # 或者更具体地针对某个API前缀进行代理 location ~* ^/(prod-api)/.*$ { rewrite ^/(.*)$ /$1 break; proxy_pass http://backend_api_endpoint/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } ``` 这里展示了两种方式来进行反向代理：一种是简单地将所有以 `/api/` 开头的请求发送给指定的服务；另一种则是基于正则表达式的匹配规则，适用于更加复杂的场景，比如带有环境变量作为前缀(`prod-api`)的情况下。 #### 使用 Alias 解决静态资源路径问题 为了避免因路径拼接不当而导致无法找到静态资源的问题，在某些情况下可能需要用 `alias` 来代替 `root` 定义静态文件的位置: ```nginx location /static/ { alias /absolute/path/to/static/files/; } ``` 这种方式可以确保当浏览器尝试加载位于 `/static/*` 下面的内容时，Nginx 将从绝对路径指向的地方读取相应文件，从而避免了相对路径计算带来的麻烦[^4]。