vue2.x webpack打包资源路径问题

作者：@caseyfu
本文为作者原创，转载请注明出处：https://www.cnblogs.com/caseor/p/vue-build-resource-path-problem.html

---

目录

一、环境:
二、目录结构:
三、关键配置文件:
1. config/index.js:
2. build/utils.js:
四、使用:
1. App.vue的css里面引用字体文件:
2. 标签src引用图片:
五、小结:

引言：

vue在dev环境下能正常运行，但build后就出现了图片等资源加载不出来的情况。最近爱上了连体字体(ligature feature)，就是输入<=自动可以连体为≤的等宽控制台字体。有JetBrain Mono、Fira Code、Cascadia Code（Windows Terminal的默认字体），扯远了。我想通过css的方式让网页加载这种字体，但是遇到了困难，以下是解决方法。

一、环境:

vue-cli 2.x, webpack模板

二、目录结构:

说明: 相对路径中含有assets关键字的资源会被webpack打包, 而static文件夹下的资源都不会被打包
用相对引用方式引用assets文件夹下的资源, 用绝对引用方式引用static文件夹下的资源。
assets下的资源会被webpack打包，会在资源名上加上一串字符，如JetBrainsMono-Regular-9a5b27d.woff

三、关键配置文件:

1. config/index.js:

build: {
    env: require("./prod.env.js"),
    index: path.resolve(__dirname, "../dist/index.html"),
    assetsRoot: path.resolve(__dirname, "../dist/"),
    assetsSubDirectory: "static",
    assetsPublicPath: "./",
    productionSourceMap: true,
    devtool: "#source-map",
    productionGzip: false,
    productionGzipExtensions: ["js", "css"],
    bundleAnalyzerReport: process.env.npm_config_report
}

2. build/utils.js:

if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath: "../../"
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
}

四、使用:

1. App.vue的css里面引用字体文件:

@font-face {     
　　font-family: "JetBrains Mono"; 
    src: url("./assets/fonts/JetBrainsMono-Regular.woff"); 
}

2. 标签src引用图片:

<img src="../assets/img/snower.png" />

五、小结:

assets里面的资源一定要相对引用, /assets/... 绝对引用方式会产生路径问题