如何禁用laravel-vite生成带主机地址的绝对路径？

你遇到的问题根源在于laravel-vite-plugin默认会在资源路径前拼接完整主机地址（如http://localhost:8080），而你之前配置的vue.transformAssetUrls仅作用于Vue模板内部的资源引用，对HTML输出的预加载、脚本路径不生效。

解决方案 #

在laravel插件配置中添加url: null，强制插件生成相对路径：

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

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/sass/app.scss',
                'resources/js/app.js',
            ],
            refresh: true,
            url: null, // 关键配置：禁用主机地址前缀
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    resolve: {
        alias: {
            vue: 'vue/dist/vue.esm-bundler.js',
        },
    },
});

补充说明 #

• 若仅需生产构建时使用相对路径，无需额外配置，插件会自动适配；但开发环境默认用完整主机地址实现热更新，若想在开发环境也强制使用相对路径，才需要添加url: null。
• 你原本配置的vue.transformAssetUrls是正确的，它负责处理Vue单文件组件中img、video等标签的资源路径，和HTML输出的资源路径属于两个独立的控制逻辑。

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