問(wèn)題描述：vue項(xiàng)目打包后，文件找得到，但是引用的字體及背景圖片找不到；

成都網(wǎng)絡(luò)公司-成都網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián)公司10余年經(jīng)驗(yàn)成就非凡，專(zhuān)業(yè)從事成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)，成都網(wǎng)頁(yè)設(shè)計(jì)，成都網(wǎng)頁(yè)制作，軟文發(fā)布平臺(tái)，廣告投放等。10余年來(lái)已成功提供全面的成都網(wǎng)站建設(shè)方案，打造行業(yè)特色的成都網(wǎng)站建設(shè)案例，建站熱線：18980820575，我們期待您的來(lái)電！

解決方法：

主要是需要單獨(dú)為 css 配置 publicPath 。

ExtractTextWebpackPlugin 提供了一個(gè) options.publicPath 的 api，可以為css單獨(dú)配置 publicPath 。

對(duì)于用 vue-cli 生成的項(xiàng)目，dist 目錄結(jié)構(gòu)如下：

dist
├── index.html
└── static
    ├── css
    ├── img
    └── js

經(jīng)常遇見(jiàn)的問(wèn)題是 css 中 background-image 的相對(duì)路徑不能正確的引用到 img 文件夾中。但是用 ExtractTextWebpackPlugin 的 publicPath 配置就可以。

更改 build/utils.js 文件中 ExtractTextPlugin 插件的options 配置：

if (options.extract) {
 return ExtractTextPlugin.extract({
 use: loaders,
 publicPath: '../../',   // 注意配置這一部分，根據(jù)目錄結(jié)構(gòu)自由調(diào)整
 fallback: 'vue-style-loader'
 })
} else {
 return ['vue-style-loader'].concat(loaders)
}

以上這篇vue 項(xiàng)目打包時(shí)樣式及背景圖片路徑找不到的解決方式就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持創(chuàng)新互聯(lián)。