如何解决 Vite 中 Vue 组件无法加载 CSS 代码的问题？

2024-05-31 17:03:28

在 Vue 组件中解决 Vite 不加载 CSS 代码的问题

问题

在使用 Vite、Laravel 和 Inertia.js 构建的应用程序中，当应用程序位于子目录中时，Vite 可能会无法加载 Vue 文件或组件中的 CSS 代码。浏览器控制台中会出现类似这样的错误信息：

Uncaught (in promise) Error: Unable to preload CSS for /build/assets/Login.a0d488b1.css d [http://example.com/subdirectory/build/assets/app.6486bb89.js:1](http://example.com/subdirectory/build/assets/app.6486bb89.js:1)

解决方案

解决此问题的最佳方法是修改 vite.config.js 文件，具体来说，就是在 @vitejs/plugin-vue 插件中为 template 选项添加一个 transformAssetUrls 对象。

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
   plugins: [
       laravel({
           input : [
               'resources/js/app.js'
           ],
           refresh: [{
               paths: ['resources/js/**'],
               config: { delay: 300 }
           }],
       }),
       
       vue({
           template: {
               transformAssetUrls: {
                   base: null,
                   includeAbsolute: false,
               },
           },
       }),
   ],
});

transformAssetUrls 选项详解

transformAssetUrls 对象包含以下设置：

base: null ：将所有资源的 base URL 设置为 null，意味着它们将相对于当前页面加载。
includeAbsolute: false ：阻止 Vite 将绝对 URL 转换为相对 URL。

优点

这种解决方案有以下优点：

使用 Vue 插件提供的标准功能。
不修改 Vite 的默认行为，避免意外后果。

替代方案

另一种解决方法是修改 Laravel Vite 插件的配置，如下所示：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
   plugins: [
       laravel({
           input : [
               'resources/js/app.js'
           ],
           refresh: [{
               paths: ['resources/js/**'],
               config: { delay: 300 }
           }],
           base: '/subdirectory' // 将 base URL 设置为子目录
       }),
       
       vue({
           template: {
               transformAssetUrls: {
                   base: null,
                   includeAbsolute: false,
               },
           },
       }),
   ],
});