V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
daguaochengtang
V2EX  ›  JavaScript

nuxt.js 部署的问题

  •  
  •   daguaochengtang · 2020-08-12 10:29:23 +08:00 · 3767 次点击
    这是一个创建于 1551 天前的主题,其中的信息可能已经有所发展或是发生改变。

    我的项目要部署在域名的二级路径上,比如 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 条附言  ·  2020-08-12 18:24:28 +08:00
    找到了**当 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 条回复    2020-08-13 15:22:52 +08:00
    yuanfnadi
        1
    yuanfnadi  
       2020-08-12 12:00:05 +08:00   ❤️ 1
    写 images/a.png 就行了。相对路径。
    daguaochengtang
        2
    daguaochengtang  
    OP
       2020-08-12 14:02:52 +08:00
    @yuanfnadi 感谢老哥,相对路径确实可以。但是用在 css 里会报错,不知道有没有好的方法?`background-image: url(images/a.png)`
    sogoecn
        3
    sogoecn  
       2020-08-12 14:17:18 +08:00
    publicPath 设置成 /demo/
    daguaochengtang
        4
    daguaochengtang  
    OP
       2020-08-12 14:35:02 +08:00
    @sogoecn 这个不行哦,publicPath 的作用是配置打包出来的 js,css 这些的路径的
    ragnaroks
        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
    daguaochengtang
        6
    daguaochengtang  
    OP
       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
        7
    daguaochengtang  
    OP
       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
        8
    ragnaroks  
       2020-08-12 19:19:32 +08:00
    @nikolausliu 没遇到你这个情况,你文件确认是放在 static 下的?static 下的文件不会被 resolve
    daguaochengtang
        9
    daguaochengtang  
    OP
       2020-08-13 08:58:58 +08:00
    @ragnaroks 是在 static 下的,img 标签不会被 resolve,但是 css 里由于用了 extract css,要把 css 提取成文件,所以要解析的
    ragnaroks
        10
    ragnaroks  
       2020-08-13 11:53:56 +08:00
    @nikolausliu 我看了下我的项目,引入样式表的方式是 nuxt.config.js 里面的 css:[] 配置项,不会被解析
    ragnaroks
        11
    ragnaroks  
       2020-08-13 11:54:19 +08:00
    extractCSS:true
    daguaochengtang
        12
    daguaochengtang  
    OP
       2020-08-13 13:59:45 +08:00
    @ragnaroks 老哥,你的项目加了 autoprefixer 自动添加样式兼容代码的配置吗,我配置了不管用
    ragnaroks
        13
    ragnaroks  
       2020-08-13 15:22:52 +08:00
    @nikolausliu 没有,我就没有 "postcss":{} 这一项
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2823 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 19ms · UTC 12:13 · PVG 20:13 · LAX 04:13 · JFK 07:13
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.