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

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

常见原因及解决方案

1. 静态资源路径配置问题

问题表现：页面可以打开，但所有静态资源(js/css)404

解决方案： - 确保Nginx配置中正确设置了静态资源路径 - 修改Nginx配置：

server {
    listen       80;
    server_name  yourdomain.com;

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

2. Vue项目publicPath设置问题

问题表现：资源路径不正确，如显示为/js/app.js而实际路径应为/project/js/app.js

解决方案： - 修改vue.config.js中的publicPath：

module.exports = {
    publicPath: process.env.NODE_ENV === 'production'
        ? '/your-sub-path/'  // 生产环境路径
        : '/',               // 开发环境路径
    // 其他配置...
}

3. 文件权限问题

问题表现：403 Forbidden错误

解决方案： - 确保Nginx用户有权限访问静态文件 - 执行以下命令：

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

4. 未正确构建Vue项目

问题表现：部署的文件不是最新的构建版本

解决方案： - 确保已正确构建项目：

npm run build
# 或
yarn build

5. 使用history模式但未配置Nginx

问题表现：直接访问路由URL时404

解决方案： - 在Nginx中添加try_files指令：

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

完整Nginx配置示例

server {
    listen       80;
    server_name  yourdomain.com;
    root         /path/to/your/vue/dist;

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

    # 静态资源缓存设置
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 1y;
        add_header Cache-Control "public, no-transform";
    }

    # 防止日志文件被访问
    location = /favicon.ico { access_log off; log_not_found off; }
    location = /robots.txt  { access_log off; log_not_found off; }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

检查步骤

1. 确认dist目录下有正确的静态文件
2. 检查Nginx错误日志：/var/log/nginx/error.log
3. 确认Nginx配置后重新加载：nginx -s reload
4. 检查文件权限和所有权

如果问题仍然存在，请提供具体的错误信息和Nginx配置，我可以帮助进一步诊断问题。