webpack踩坑记--打包事后资源路径404问题

前言

该文章是基于低版本 vue-cli2.x 建立的项目，vue-cli3.0 之后修改 webpack 配置须要在项目根目录下新建一个 vue.config.js，不过都是换汤不换药

项目配置

页面很简单，一段文字，和一张背景图片

下面几个配置项比较重要:

• assetRoot: 打包后文件存放路径
• assetsSubDirectory：静态资源路径(除 index.html 其余资源将被放入这里)
• assetsPublicPath：index.html 里面引用资源的的路径前缀

假设咱们作以下的配置

# /config/index.js
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',

访问白屏问题

打包后 dist 的目录是这样的

# dist
┌── static
│   └── css
│   │   └── *.css
│   └── img
│   │   └── *.jpg
│   └── js
│   │   └── *.js
└── index.html

而后，双击打开 index.html，what？怎么白屏了

F12 看一下，发现这里的资源路径是有问题的，由于 static/js/xxx 表明的是根路径下，而咱们打开是在项目目录下找不到资源，天然就白屏了。

打包事后的目录结构是固定的，而 index.html 和 static 同级，固能够用相对路径引入 static 下的资源

配置:

assetsSubDirectory：'./'

配置完成后，再打包访问，文字出来，背景图片裂开了......

背景图片裂开

F12 发现，图片资源路径有问题：static/img/vague_bg.9cfff92.png。由于是在 css 里引入的 img，结合打包出来的目录结构，正确的应该是 /static/img/xxx，但问题是前面已经设置了 assetsSubDirectory 为相对路径.......

有补救方法，在 xxx.css 里面回退两个路径不就回到了 static 目录了吗？

配置 url-loader

# /build/webpack.base.conf.js 设置rules
{
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  use: [
    {
      loader: "url-loader",
      options: {
        limit: 10000,
        name: utils.assetsPath("img/[name].[hash:7].[ext]"),
        publicPath: "../../"
      }
    }
  ]
},

设置完，再打包访问，perfect~

后言

有些人可能会问，为何不一开始直接设置 assetsSubDirectory：'/'，即根路径不也能够解决问题吗？

是的，没错，确实能够解决问题。可是我哔哩哔哩一大堆是提供一些问题的解决思路，本身踩过的坑和如何排坑的。若是设置了跟路径，那么就限死了当前资源只能在根路径了，可能项目会集成到后端项目中(也能够经过目录映射解决)，不必定是在根路径下。设置当前 dist 下的资源位相对路径确保在任何环境下资源路径都没有问题。

该篇文章是 18 年刚毕业的时候遇到的问题，以前写在本身的 blog 里面，由于疏于管理本身的 blog 被黑，如今分享出来，记录本身的心路历程。

---

END