解决Nginx部署Vue项目找不到JS/CSS文件的问题

当在Nginx上部署Vue项目时遇到找不到JS/CSS文件的问题，通常是由于路径配置不正确导致的。以下是几种常见解决方案：

1. 检查Vue项目的publicPath配置

在Vue项目的vue.config.js中，确保publicPath设置正确：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/' : '/',
  // 或者如果你的项目部署在子目录下
  // publicPath: '/sub-directory/'
}

2. 配置正确的Nginx location

确保Nginx配置中正确处理静态资源请求：

server {
    listen       80;
    server_name  yourdomain.com;

    location / {
        root   /path/to/your/vue/dist;
        index  index.html;
        try_files $uri $uri/ /index.html;
    }

    # 处理静态资源
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        root /path/to/your/vue/dist;
        expires 30d;
        add_header Cache-Control "public, no-transform";
    }
}

3. 检查文件权限

确保Nginx用户有权限访问dist目录：

chown -R nginx:nginx /path/to/your/vue/dist
chmod -R 755 /path/to/your/vue/dist

4. 检查构建路径

确保构建后的文件路径正确： - 运行npm run build后，检查dist目录结构 - 确保JS/CSS文件存在于dist目录中

5. 绝对路径与相对路径问题

如果使用绝对路径，确保路径前缀正确： - 在vue.config.js中设置正确的publicPath - 或者在Nginx配置中添加适当的base路径

6. 检查Nginx错误日志

查看Nginx错误日志获取更多信息：

tail -f /var/log/nginx/error.log

7. 完整示例配置

server {
    listen 80;
    server_name yourdomain.com;

    root /path/to/your/vue/dist;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location /static/ {
        alias /path/to/your/vue/dist/static/;
        expires 1y;
        access_log off;
        add_header Cache-Control "public";
    }

    location ~* \.(js|css)$ {
        expires 7d;
        access_log off;
        add_header Cache-Control "public";
    }
}

通过以上步骤，应该能解决大部分Vue项目部署后找不到JS/CSS文件的问题。如果问题仍然存在，请根据具体的错误日志进一步排查。