nuxt.js 部署的问题

2020-08-12 10:29:23 +08:00
 daguaochengtang

我的项目要部署在域名的二级路径上,比如 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 没有提供配置,是否有其它较好的解决方案?

3555 次点击
所在节点    JavaScript
13 条回复
yuanfnadi
2020-08-12 12:00:05 +08:00
写 images/a.png 就行了。相对路径。
daguaochengtang
2020-08-12 14:02:52 +08:00
@yuanfnadi 感谢老哥,相对路径确实可以。但是用在 css 里会报错,不知道有没有好的方法?`background-image: url(images/a.png)`
sogoecn
2020-08-12 14:17:18 +08:00
publicPath 设置成 /demo/
daguaochengtang
2020-08-12 14:35:02 +08:00
@sogoecn 这个不行哦,publicPath 的作用是配置打包出来的 js,css 这些的路径的
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
daguaochengtang
2020-08-12 17:30:47 +08:00
@ragnaroks button{background-image:url('image/button.png');}这种写法会在 run build 阶段报错:

Can't resolve './images/button.png' in '项目根路径\pages'
daguaochengtang
2020-08-12 19:01:25 +08:00
@yuanfnadi
@sogoecn
@ragnaroks
另外请教各位一个问题,我的项目配置的 autoprefixer 没有生效,这个问题我找了很久,不知是何原因。配置如下:

```javascript
// nuxt.config.js
{
postcss: {
preset:
autoprefixer: true
}
}
}
```
同时,我在根目录下添加了.browserslistrc 文件,内容如下
```
> 1%
last 2 versions
not dead
```
ragnaroks
2020-08-12 19:19:32 +08:00
@nikolausliu 没遇到你这个情况,你文件确认是放在 static 下的?static 下的文件不会被 resolve
daguaochengtang
2020-08-13 08:58:58 +08:00
@ragnaroks 是在 static 下的,img 标签不会被 resolve,但是 css 里由于用了 extract css,要把 css 提取成文件,所以要解析的
ragnaroks
2020-08-13 11:53:56 +08:00
@nikolausliu 我看了下我的项目,引入样式表的方式是 nuxt.config.js 里面的 css:[] 配置项,不会被解析
ragnaroks
2020-08-13 11:54:19 +08:00
extractCSS:true
daguaochengtang
2020-08-13 13:59:45 +08:00
@ragnaroks 老哥,你的项目加了 autoprefixer 自动添加样式兼容代码的配置吗,我配置了不管用
ragnaroks
2020-08-13 15:22:52 +08:00
@nikolausliu 没有,我就没有 "postcss":{} 这一项

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/697596

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX