溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

vue 項目打包時樣式及背景圖片路徑找不到的解決方式

發(fā)布時間:2020-09-14 06:53:24 來源:腳本之家 閱讀:532 作者:向夢想出發(fā)11 欄目:web開發(fā)

問題描述:vue項目打包后,文件找得到,但是引用的字體及背景圖片找不到;

解決方法:

主要是需要單獨為 css 配置 publicPath 。

ExtractTextWebpackPlugin 提供了一個 options.publicPath 的 api,可以為css單獨配置 publicPath 。

對于用 vue-cli 生成的項目,dist 目錄結構如下:

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

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

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

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

以上這篇vue 項目打包時樣式及背景圖片路徑找不到的解決方式就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持億速云。

向AI問一下細節(jié)

免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內(nèi)容。

AI