如何解决 Laravel/Vue/Vite 网站部署中令人头疼的 \

2024-03-07 17:29:43

在搭建基于 Laravel、Vue 和 Vite 的网站并进行部署时，你可能会碰到浏览器抛出 “服务器响应的 MIME 类型为 'text/html'” 的错误，并拒绝加载 .js 或 .css 文件。这个问题的根源在于服务器没有被正确配置，无法处理 Vite 构建出的 JavaScript 和 CSS 资源，而是将所有请求都返回了 index.blade.php 文件，也就是 HTML 文本。

揪出问题的症结

当浏览器请求一个 JavaScript 或 CSS 文件时，它期望服务器返回带有正确 MIME 类型的文件。MIME 类型告诉浏览器如何处理接收到的文件。例如，"application/javascript" 告诉浏览器这是一个 JavaScript 文件，需要被执行；"text/css" 则表示这是一个 CSS 文件，需要被应用到页面样式。

如果服务器返回的 MIME 类型是 "text/html"，浏览器就会认为这是一个 HTML 文件，而不是它期望的 JavaScript 或 CSS 文件。因此，浏览器会拒绝加载这些文件，导致网站无法正常工作。

抽丝剥茧，解决问题

要解决这个问题，我们需要确保服务器能够正确处理 Vite 构建出的资源，并返回正确的 MIME 类型。以下是一些常用的解决方法：

1. Nginx 配置调整

如果你的服务器使用的是 Nginx，你需要修改 Nginx 的配置文件，在 location / 代码块中添加 try_files 指令。这个指令会告诉 Nginx 首先尝试查找请求的文件，如果文件不存在，则尝试查找对应的目录，最后如果都没有找到，则将请求传递给 Laravel 的入口文件 index.php。

location / {
    # ... 其他 Nginx 配置 ...
    try_files $uri $uri/ /index.php?$query_string;
}

这段配置告诉 Nginx 尝试以下操作：

查找与请求 URI 完全匹配的文件。
如果找不到文件，则查找与请求 URI 匹配的目录，并在该目录下查找 index.html 或 index.php 文件。
如果仍然找不到，则将请求传递给 Laravel 的入口文件 index.php，由 Laravel 处理请求。

2. Vite 配置优化

在 Vite 的配置文件 vite.config.js 中，你需要确保 build.rollupOptions.output.assetFileNames 选项被正确设置。这个选项指定了 Vite 构建出的资源的文件名格式。

// vite.config.js
export default defineConfig({
  // ... 其他 Vite 配置 ...
  build: {
    rollupOptions: {
      output: {
        assetFileNames: 'assets/[name]-[hash][extname]', 
      },
    },
  },
});

上述配置会将构建出的资源文件放置在 assets 目录下，并使用文件名 + 哈希值 + 扩展名的命名方式。

3. 构建与部署

在完成上述配置后，你需要运行 npm run build 命令来构建 Vite 资产。构建完成后，将构建出的应用程序部署到你的服务器上。

4. HTTP 头检查

部署完成后，使用浏览器开发者工具检查服务器响应的 HTTP 头。确保服务器返回的 JavaScript 和 CSS 文件的 MIME 类型分别为 "application/javascript" 和 "text/css"。

5. GZIP 压缩（可选）

启用 GZIP 压缩可以显著提高应用程序的加载速度。确保你的服务器配置为处理 GZIP 压缩。

示例代码片段

index.blade.php

<!DOCTYPE html>
<html>
<head>
  
  @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
  <div id="app"></div>
</body>
</html>

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,
    }),
  ],
  build: {
    rollupOptions: {
      output: {
        assetFileNames: 'assets/[name]-[hash][extname]',
      },
    },
  },
});