在DigitalOcean部署带Vite/Tailwind的Laravel应用遇样式及报错问题

一、先处理ELOOP: Too many symbolic links错误 #

这个错误是因为出现了循环符号链接，从错误路径/workspace/app/.heroku/php/php/php/...能看出，.heroku目录下的PHP链接形成了循环引用，大概率是从Heroku迁移部署时遗留的无用目录。

• 直接删除该目录：

  rm -rf /workspace/app/.heroku
  

• 重新启动npm run dev测试，循环链接的错误应该会消失。

二、修复生产环境（npm run build后）样式/JS无法加载的问题 #

1. 检查Laravel环境配置 #

确保.env文件里的APP_URL设置为你的DigitalOcean域名或服务器IP：

APP_URL=https://your-domain.com

如果设置了ASSET_URL，请确保它和APP_URL一致，或者直接注释掉ASSET_URL，让Laravel自动使用APP_URL作为资源路径。

2. 确认Vite配置正确 #

检查项目根目录的vite.config.js，确保基础路径和服务器配置符合生产环境要求：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
    base: '/',
    server: {
        host: '0.0.0.0',
        port: 5173,
    },
});

3. 重新执行完整构建流程 #

在服务器上按顺序执行以下命令，确保依赖和构建产物正确：

# 清理旧依赖和构建文件
rm -rf node_modules package-lock.json
npm install
npm run build

# 清理Laravel缓存
php artisan cache:clear
php artisan config:clear
php artisan view:clear

4. 检查Nginx配置 #

确保Nginx正确指向Laravel的public目录，并且允许访问public/build下的Vite资源。示例配置：

server {
    listen 80;
    server_name your-domain.com;
    root /var/www/your-project/public;

    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-Content-Type-Options "nosniff";

    index index.php;
    charset utf-8;

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

    # 确保Vite构建的资源可被访问
    location /build/ {
        try_files $uri =404;
    }

    location ~ \.php$ {
        fastcgi_pass unix:/var/run/php/php8.2-fpm.sock; # 根据你的PHP版本调整
        fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
        include fastcgi_params;
    }

    location ~ /\.(?!well-known).* {
        deny all;
    }
}

修改配置后重启Nginx：

sudo systemctl restart nginx

5. 修正文件权限 #

确保public/build目录和文件的权限让Nginx能正常读取：

sudo chown -R www-data:www-data /var/www/your-project/public/build
sudo chmod -R 755 /var/www/your-project/public/build

三、验证结果 #

1. 执行npm run build后，检查public/build目录下是否生成了assets文件夹，里面有编译后的CSS和JS文件。
2. 访问网站，打开浏览器开发者工具（F12）的网络标签，刷新页面查看资源请求状态：
   • 若返回404：检查资源路径是否正确，Nginx配置是否生效。
   • 若返回200但样式不生效：检查文件内容是否正确，或强制刷新页面（Ctrl+F5）清除缓存。

内容的提问来源于stack exchange，提问作者laravel_