技术解析

nuxt.js 部署的问题
0
2021-08-13 13:49:55
idczone

我的项目要部署在域名的二级路径上,比如 http://test.com/demo 上

首先 nuxt.js 做了如下配置

{
  router: {
    base: '/demo/'
  }
}

这样,所有的 js,css 资源会自动加上 /demo/前缀

但是,static 文件夹下的静态资源访问的路径不对。比如我有这样一张图片:/static/images/a.png,之前我只需要就能访问到,现在我需要手动在所有的地方机上前缀,就像这样

我想问:这样手动加前缀的工作,nuxt 是否有提供一个配置的地方(就像上面的router.base),可以统一给所有的静态资源加上前缀?如果 nuxt 没有提供配置,是否有其它较好的解决方案?


写 images/a.png 就行了。相对路径。

感谢老哥,相对路径确实可以。但是用在 css 里会报错,不知道有没有好的方法?`background-image: url(images/a.png)`

publicPath 设置成 /demo/

这个不行哦,publicPath 的作用是配置打包出来的 js,css 这些的路径的

样式表里面的资源是相对于样式表位置
[http://abc.com/demo/static/style.css]
button{background-image:url('image/button.png');}
这里的存放路径应当是 http://abc.com/demo/static/image/button.png

button{background-image:url('image/button.png');}这种写法会在 run build 阶段报错:
Can't resolve './images/button.png' in '项目根路径\pages'




另外请教各位一个问题,我的项目配置的 autoprefixer 没有生效,这个问题我找了很久,不知是何原因。配置如下:
```javascript
// nuxt.config.js
{
postcss: {
preset:
autoprefixer: true
}
}
}
```
同时,我在根目录下添加了.browserslistrc 文件,内容如下
```
> 1%
last 2 versions
not dead
```

没遇到你这个情况,你文件确认是放在 static 下的?static 下的文件不会被 resolve

是在 static 下的,img 标签不会被 resolve,但是 css 里由于用了 extract css,要把 css 提取成文件,所以要解析的

我看了下我的项目,引入样式表的方式是 nuxt.config.js 里面的 css:[] 配置项,不会被解析

extractCSS:true

老哥,你的项目加了 autoprefixer 自动添加样式兼容代码的配置吗,我配置了不管用

没有,我就没有 "postcss":{} 这一项

数据地带为您的网站提供全球顶级IDC资源
在线咨询
专属客服