vue3 中css用绝对路径引用图片报Cannot find module的问题

在vue cli官方文档（https://cli.vuejs.org/zh/guide/html-and-static-assets.html#%E4%BB%8E%E7%9B%B8%E5%AF%B9%E8%B7%AF%E5%BE%84%E5%AF%BC%E5%85%A5）中已经明确说明：

• 如果 URL 是一个绝对路径 (例如 /images/foo.png)，它将会被保留不变。

然后我在css中使用：background-image: url("/assets/img/bg.jpg");
还是报错：

Syntax Error: HookWebpackError: Cannot find module '/assets/img/bg.jpg'
-- inner error --
Error: Cannot find module '/assets/img/bg.jpg'

查看css-loader的官方文档：https://github.com/webpack-contrib/css-loader

里面有个参数url可以设置，于是修改vue.config.js,添加内容：

css: {
        loaderOptions: {
            css: {
                url: {
                    filter: (url, resourcePath) => {
                        if (url.startsWith('/') || url.startsWith('http:') || url.startsWith('https:')) {
                            return false
                        }
                        return true
                    }
                }
            }
        }
    },

问题得到解决

然而，并不推荐这样做，因为vue.config.js还有两个参数publicPath和assetsDir，这两个参数决定了资源文件的位置，如果项目不是部署在根目录，那么资源文件路径就会出错