最近发现vue vite打包后的资源Referer丢失了,于是想着解决办法

问题原因

Vite 打包后的动态引入 JS 模块会导致 HTTP 请求头中的 Referer 字段丢失，这主要是因为 Vite 的 modulePreload 机制在 Chrome 浏览器中存在兼容性问题。当服务器启用了防盗链机制时，缺少 Referer 字段会导致资源请求失败。

解决方案

禁用 modulePreload
在你的 Vite 配置中添加以下配置：

javascript
import {defineConfig} from 'vite';
import vue from '@vitejs/plugin-vue';
import {link} from "./src/config/config.js";
import path from 'path'

export default ({mode}) => {
    return defineConfig({
        plugins: [vue()],
        base: link,
        server: {
            host: "0.0.0.0",
        },
        build: {
            modulePreload: false  // 禁用 modulePreload
        },
        resolve: {
            alias: [
                {
                    find: '@',
                    replacement: path.resolve(__dirname, 'src')
                },
            ]
        },
        css: {
            preprocessorOptions: {
                scss: {
                    api: 'modern',
                    silenceDeprecations: ['legacy-js-api'],
                    sassOptions: {
                        outputStyle: 'compressed',
                    },
                },
            },
        }
    });
}