vue-cli4使用相对路径打包css引用路径应如何设置?

因为需求,打包后的项目可以同时使用域名及IP访问
域名访问的方式:http://www.xxx.com/admin/
而IP访问方式:http://10.0.0.1/
存在一个相对路径的问题,所以vue.config.js打包设置使用的是相对路径,这样保证两种访问方式访问都可以获取到静态文件

vue.config.js:

module.exports = {
    publicPath: './',
}

我将所有图片文件都放置在public目录下:

|-- public
|   |-- img // 存放的静态图片文件
|   `-- index.html

在css设置引入的时候是这么写:

background: url("/img/a.png");

打包后的目录结构:

|-- dist
|   |-- css
|   |-- img
|   |-- js
|   `-- index.html

但在打包后的css文件引入url时却出现了问题,在没有二级目录的情况下,能正常获取图片资源,而使用存在二级目录域名访问,则获取不到。
如果改成background: url("/admin/img/a.png");,则直接访问的情况便获取不到。使用开发者模式改变为background: url("../admin/img/a.png");,则两种方式均可访问。

在开发环境我尝试将css改成相对路径 background: url("../img/a.png");,直接报错。

我尝试搜索打包配置,但只找到了之前版本的配置方法。
所以我想求助下,可以如何进行设置,让打包后的css中url也有一个相对的路径,解决不同级目录访问的问题。

谢谢。

待解决 悬赏分:50 - 离问题结束还有 387天15小时11分21秒
反对 0举报 0 收藏 0

我来回答

回答0