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

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

常见原因

1. 静态资源路径配置错误
2. Vue项目构建时publicPath设置不正确
3. Nginx root或alias配置不当
4. 文件权限问题

解决方案

1. 检查Vue项目的publicPath配置

在vue.config.js中确保publicPath设置正确：

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

2. 正确的Nginx配置

基本配置示例

server {
    listen       80;
    server_name  yourdomain.com;

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

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

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

如果部署在子目录下

server {
    listen       80;
    server_name  yourdomain.com;

    location /sub-directory/ {
        alias   /path/to/your/dist/;
        index  index.html;
        try_files $uri $uri/ /sub-directory/index.html;
    }
}

3. 检查文件权限

确保Nginx用户有权限访问静态文件：

chown -R www-data:www-data /path/to/your/dist
chmod -R 755 /path/to/your/dist

4. 检查构建结果

确保构建后的dist目录结构正确，通常应包含： - index.html - static/js/ - static/css/ - static/media/ (如果有图片等资源)

5. 检查Nginx错误日志

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

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

6. 其他可能的问题

• 如果使用history模式路由，确保Nginx配置了try_files
• 如果使用HTTPS，确保所有资源链接都是HTTPS
• 清除浏览器缓存后测试

验证步骤

1. 在浏览器中打开开发者工具，查看Network面板
2. 检查404资源的实际请求URL
3. 对比服务器上实际文件路径
4. 根据差异调整Nginx配置或Vue项目的publicPath

通过以上步骤，应该能够解决Nginx部署Vue项目时找不到JS/CSS文件的问题。