如何让Vite为CSS图片的@别名替换为Asset URL而非本地路径

我在Laravel的Vite环境中，想把CSS里这类图片路径：

body {
    background-image: url('@/images/background.png');
}

替换为ASSET_URL环境变量的值。但当我在Vite里这么配置时：

resolve: {
    alias: {
        '@': process.env.ASSET_URL || path.resolve(__dirname, 'public')
    },
},

会触发错误：

[vite:css] [postcss] ENOENT: no such file or directory, open 'https://asdfasdfasdf.cloudfront.net/images/background.png'

如果删掉配置里的process.env.ASSET_URL ||，别名能正常解析本地图片路径，但图片只能存在本地仓库、从服务器直接提供，没法通过CloudFront分发。请问怎么让Vite直接给所有@前缀的路径加上ASSET_URL作为前缀？

Vite的resolve.alias是用来解析本地文件路径的，不能直接设置远程URL——它会尝试去本地查找远程地址对应的文件，这就是报错的核心原因。要实现给资源路径加CDN前缀，得用Vite的专属配置或PostCSS插件来处理：

方法1：使用Vite的base配置（推荐） #

Laravel Vite集成已经原生支持通过ASSET_URL环境变量设置base，步骤如下：

1. 在.env文件中配置CloudFront地址：

ASSET_URL=https://asdfasdfasdf.cloudfront.net

2. 保留Vite别名的本地路径配置，确保开发阶段能解析本地文件：

resolve: {
    alias: {
        '@': path.resolve(__dirname, 'public')
    },
},

3. CSS中继续使用@/images/background.png的写法即可。

Vite在生产构建时会自动把所有资源路径替换为ASSET_URL开头的地址，开发阶段则保持本地路径，完美兼容两种场景。

方法2：使用PostCSS插件自定义路径转换 #

如果需要更灵活的路径控制，可以用postcss-url插件处理CSS资源路径：

1. 安装插件：

npm install postcss-url --save-dev

2. 在postcss.config.js中配置插件，结合环境变量判断是否添加CDN前缀：

module.exports = {
    plugins: [
        require('postcss-url')({
            url: (asset) => {
                if (asset.url.startsWith('@/') && process.env.ASSET_URL) {
                    // 去掉@前缀，替换为CDN地址
                    return process.env.ASSET_URL + asset.url.slice(1);
                }
                return asset.url;
            }
        })
    ]
}

3. 同时保留Vite的本地别名配置，保证开发阶段正常解析文件。

这样开发阶段用本地路径，生产构建时自动替换为CloudFront地址，不会出现文件找不到的错误。

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