nginx 部署vue2项目 根目录 、 子目录

vue打包部署nginx到---根目录---

一、Vue 项目打包

首先确保已将 Vue 项目打包为生产环境文件

# 打包 Vue 项目（生成 dist 目录）
npm run build

打包后会生成 dist 目录，包含 index.html 和静态资源（js、css、img 等），这些文件需要部署到 Nginx 中。

二、Nginx 基础配置（Vue 项目）

假设将 dist 目录下的文件复制到 Nginx 的 /usr/share/nginx/html/vue-app 目录，配置如下：

# 编辑配置文件（如 /etc/nginx/conf.d/vue-app.conf）
server {
    listen 80;
    server_name your-domain.com;  # 替换为你的域名或服务器 IP

    # Vue 项目根目录（指向 dist 目录的绝对路径）
    #root /usr/share/nginx/html/vue-app/dist;
    #index index.html;  # 默认首页

    # 处理静态资源（JS、CSS、图片等）
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
        expires 30d;  # 静态资源缓存 30 天（利用浏览器缓存，减少请求）
        add_header Cache-Control "public, max-age=2592000";  # 缓存控制
    }

    # 处理单页应用（SPA）的历史模式路由 history 路由模式
    location / {
      # =================根路径指向项目地址=======================

      root /usr/share/nginx/html/vue-app/dist; # 项目目录
      index index.html;  # 默认首页

    try_files $uri $uri/ /index.html;  #刷新404问题 关键：所有路由都指向 index.html，由 Vue Router 处理 } 
   # 禁止访问  .env 等敏感文件 
     location ~ /\.(env|git|svn) { deny all; return 403; } }

 

1. SPA 历史模式路由
   Vue Router 默认使用 hash 模式（URL 带 #），但生产环境通常使用 history 模式（URL 更美观，无 #）。
   • 此时直接访问路由（如 http://your-domain.com/about）会导致 Nginx 报 404 错误，因为 Nginx 会去寻找对应的物理文件。
   • try_files $uri $uri/ /index.html 解决此问题：Nginx 会先尝试访问文件，若不存在则重定向到 index.html，由 Vue Router 解析路由。

四、配合反向代理 API 请求

如果 Vue 项目需要调用后端 API（如 http://your-domain.com/api/xxx），可在 Nginx 中配置反向代理，避免跨域问题：

server {
    listen 80;
    server_name your-domain.com;
    root /usr/share/nginx/html/vue-app;
    index index.html;

    # 静态资源缓存
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
        expires 30d;
        add_header Cache-Control "public, max-age=2592000";
    }

    # API 反向代理（匹配以 /api 开头的请求）
    location /api {
        proxy_pass http://backend-server:8080;  # 替换为后端 API 服务地址
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    # SPA 路由处理
    location / {
        try_files $uri $uri/ /index.html;
    }
}

效果：
Vue 项目中调用 axios.get('/api/user') 时，Nginx 会自动转发到 http://backend-server:8080/api/user，避免跨域问题。

 

nginx -s reload

 

 

vue打包部署nginx到---子目录---

vue

// src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: '/app/',  // 子目录路径（必须与 Nginx 配置的子目录一致）
  routes: [
    // 路由配置...
  ]
})

 修改项目打包路径（vue.config.js）

// vue.config.js
module.exports = {
  // 打包后的静态资源路径前缀（必须与子目录一致）
  publicPath: '/app/',   // 前后都要有//  名称一致
  // 其他配置...
  outputDir: 'dist'  // 打包输出目录（默认即可）
}

 

打包后，dist 目录下的 index.html 中，静态资源引用路径会自动带上 /app/ 前缀（例如 <script src="/app/js/app.xxx.js"></script>）

 

nginx

server {
    listen 80;
    server_name yourdomain.com;

    # 子目录配置（核心）
    location /app/ {
        # 指向 Vue 项目在服务器上的实际路径（dist 文件夹）
        alias /usr/share/nginx/html/app/;  #子路径 要使用 alias
        index index.html;

        # 关键：子目录下的路由重定向到子目录的 index.html
        try_files $uri $uri/ /app/index.html;    #刷新防止 出现404
    }

    # 其他目录配置（如果需要）
    location / {
        # 根目录或其他项目的配置
    }
}