Nginx部署Vue项目添加访问后缀配置指南

在Nginx中部署Vue项目并添加访问后缀是一个常见的需求，通常用于多环境部署或版本控制。以下是详细的配置方法：

基本配置方案

1. 修改Vue项目配置

首先需要在Vue项目中设置publicPath（Vue CLI 3+项目）：

// vue.config.js
module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/your-suffix/'  // 你的后缀
    : '/'
}

2. Nginx配置

server {
    listen       80;
    server_name  your-domain.com;

    location /your-suffix/ {
        alias   /path/to/your/vue-project/dist/;
        try_files $uri $uri/ /your-suffix/index.html;

        # 如果使用history模式
        if (!-e $request_filename) {
            rewrite ^/your-suffix/(.*) /your-suffix/index.html last;
        }
    }

    # 可选：重定向根路径到带后缀的URL
    location = / {
        return 301 /your-suffix/;
    }
}

高级配置方案

1. 多环境后缀配置

map $http_host $suffix {
    default       "";
    "test.example.com" "/test";
    "dev.example.com"  "/dev";
}

server {
    listen 80;
    server_name ~^(.*)\.example\.com$;

    location ~ ^${suffix}(/.*)?$ {
        alias /path/to/your/vue-project/dist/;
        try_files $1 $1/ ${suffix}/index.html;

        # 处理history模式
        if (!-e $request_filename) {
            rewrite ^${suffix}/?(.*)$ ${suffix}/index.html last;
        }
    }
}

2. 带版本号的后缀

server {
    listen 80;
    server_name your-domain.com;

    location ~ ^/v[0-9]+\.[0-9]+/ {
        alias /path/to/your/vue-project/dist/;
        try_files $uri $uri/ @rewrite;
    }

    location @rewrite {
        rewrite ^/v[0-9]+\.[0-9]+/(.*)$ /v1.0/index.html last;
    }
}

常见问题解决

1. 静态资源404错误：

   • 确保publicPath与Nginx配置的后缀一致
   • 检查文件权限：chmod -R 755 /path/to/dist

2. 路由问题：

   • 如果使用history模式，确保所有非静态文件请求都重定向到index.html
   • 检查Vue路由的base配置是否匹配后缀

3. 缓存问题：

   location /your-suffix/ {
      add_header Cache-Control "no-cache, no-store, must-revalidate";
      add_header Pragma "no-cache";
      add_header Expires 0;
   }
   

最佳实践

1. 使用环境变量管理不同环境的后缀
2. 为生产环境配置合适的缓存策略
3. 使用Nginx的gzip压缩提高性能
4. 考虑设置HTTP到HTTPS的重定向

通过以上配置，你可以灵活地为Vue项目添加各种访问后缀，满足不同部署场景的需求。