vue2.x webpack打包資源路徑問題

引言：

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/... 絕對引用方式會產生路徑問題