我的项目要部署在域名的二级路径上,比如 http://test.com/demo 上
首先 nuxt.js 做了如下配置
{
router: {
base: '/demo/'
}
}
这样,所有的 js,css 资源会自动加上 /demo/前缀
但是,static 文件夹下的静态资源访问的路径不对。比如我有这样一张图片:/static/images/a.png
,之前我只需要<img src="/images/a.png">
就能访问到,现在我需要手动在所有的地方机上前缀,就像这样<img src="/demo/images/a.png">
。
我想问:这样手动加前缀的工作,nuxt 是否有提供一个配置的地方(就像上面的router.base
),可以统一给所有的静态资源加上前缀?如果 nuxt 没有提供配置,是否有其它较好的解决方案?
1
yuanfnadi 2020-08-12 12:00:05 +08:00 1
写 images/a.png 就行了。相对路径。
|
2
daguaochengtang OP @yuanfnadi 感谢老哥,相对路径确实可以。但是用在 css 里会报错,不知道有没有好的方法?`background-image: url(images/a.png)`
|
3
sogoecn 2020-08-12 14:17:18 +08:00
publicPath 设置成 /demo/
|
4
daguaochengtang OP @sogoecn 这个不行哦,publicPath 的作用是配置打包出来的 js,css 这些的路径的
|
5
ragnaroks 2020-08-12 15:27:05 +08:00
样式表里面的资源是相对于样式表位置
[http://abc.com/demo/static/style.css] button{background-image:url('image/button.png');} 这里的存放路径应当是 http://abc.com/demo/static/image/button.png |
6
daguaochengtang OP @ragnaroks button{background-image:url('image/button.png');}这种写法会在 run build 阶段报错:
Can't resolve './images/button.png' in '项目根路径\pages' |
7
daguaochengtang OP |
8
ragnaroks 2020-08-12 19:19:32 +08:00
@nikolausliu 没遇到你这个情况,你文件确认是放在 static 下的?static 下的文件不会被 resolve
|
9
daguaochengtang OP @ragnaroks 是在 static 下的,img 标签不会被 resolve,但是 css 里由于用了 extract css,要把 css 提取成文件,所以要解析的
|
10
ragnaroks 2020-08-13 11:53:56 +08:00
@nikolausliu 我看了下我的项目,引入样式表的方式是 nuxt.config.js 里面的 css:[] 配置项,不会被解析
|
11
ragnaroks 2020-08-13 11:54:19 +08:00
extractCSS:true
|
12
daguaochengtang OP @ragnaroks 老哥,你的项目加了 autoprefixer 自动添加样式兼容代码的配置吗,我配置了不管用
|
13
ragnaroks 2020-08-13 15:22:52 +08:00
@nikolausliu 没有,我就没有 "postcss":{} 这一项
|