nuxt.js 部署的问题

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

This topic created in 2109 days ago, the information mentioned may be changed or developed.

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

Supplement 1 · Aug 12, 2020

找到了**当 nuxt 部署在域名二级路径下，css 引用 static 目录下资源**的解决方法了：

假如有如下的目录结构

/pages/index.vue 和 /static/images/a.jpg

在 pages/index.vue 中用 css 引入 static/images/a.jpg 时，应该这样写: bg {background-image: url(../static/images/a.jpg)}

这种写法，不用把部署路径写死在 css 里了，当你有可能变更部署路径时，这中写法自然是有优势的

但是，这种写法要用到 ../ 会很不美观，当页面涉及到文件夹嵌套的时候，需要计算相对路径里有几层 ../ 这同样是一种心智负担。

只能说这两种方式都不完美，难道就没有更好的方案了吗

13 replies • 2020-08-13 15:22:52 +08:00

yuanfnadi

Aug 12, 2020

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

daguaochengtang

Aug 12, 2020

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

sogoecn

Aug 12, 2020

publicPath 设置成 /demo/

daguaochengtang

Aug 12, 2020

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

ragnaroks

Aug 12, 2020

样式表里面的资源是相对于样式表位置

[http://abc.com/demo/static/style.css]
button{background-image:url('image/button.png');}

这里的存放路径应当是 http://abc.com/demo/static/image/button.png

daguaochengtang

Aug 12, 2020

@ragnaroks button{background-image:url('image/button.png');}这种写法会在 run build 阶段报错：

Can't resolve './images/button.png' in '项目根路径\pages'

daguaochengtang

Aug 12, 2020

@yuanfnadi
@sogoecn
@ragnaroks
另外请教各位一个问题，我的项目配置的 autoprefixer 没有生效，这个问题我找了很久，不知是何原因。配置如下：

```javascript
// nuxt.config.js
{
postcss: {
preset:
autoprefixer: true
}
}
}
```
同时，我在根目录下添加了.browserslistrc 文件，内容如下
```
> 1%
last 2 versions
not dead
```

ragnaroks

Aug 12, 2020

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

daguaochengtang

Aug 13, 2020

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

ragnaroks

Aug 13, 2020

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

ragnaroks

Aug 13, 2020

extractCSS:true

daguaochengtang

Aug 13, 2020

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

ragnaroks

Aug 13, 2020

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