基于webpack下在vue中使用scss，背景圖片的使用

Alfred 發布于2019-08-23 16:25 / 3251人閱讀

摘要：在設置背景圖片，在項目打包后，圖層路徑會增加文件夾所在路徑。我們希望的情況下，背景圖路徑應為，而實際則會出現，注意，這里是多余的。解決方法有個在中直接設置在配置文件夾找到，作以下更改增加增加

在scss設置背景圖片(background-image)，在項目webpack打包后，圖層路徑會增加css文件夾所在路徑。
我們希望的情況下，背景圖路徑應為"static/img/imgname.png"，而實際則會出現：
"static/css/static/img/imgname.png"，注意，這里static/css是多余的。

解決方法有2個：
1.在template中直接設置style="background-image:url("")";
2.在webpack配置文件夾找到utils.js，作以下更改：
**增加publicPath**

if (options.extract) {
  return ExtractTextPlugin.extract({
    use: loaders,
    //增加publicPath
    publicPath:  "../../",
    fallback: "vue-style-loader"
  })
}

GPU云服務器云服務器 vue 中使用 webrtc vue中使用webrtc webpack使用 webpack 使用公用cdn

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103012.html

基于webpack下在vue中使用scss，背景圖片的使用

摘要：在設置背景圖片，在項目打包后，圖層路徑會增加文件夾所在路徑。我們希望的情況下，背景圖路徑應為，而實際則會出現，注意，這里是多余的。解決方法有個在中直接設置在配置文件夾找到，作以下更改增加增加在scss設置背景圖片(background-image)，在項目webpack打包后，圖層路徑會增加css文件夾所在路徑。我們希望的情況下，背景圖路徑應為static/img/imgname....

mushang 2019-08-30 15:43 評論0 收藏0
從零開始做Vue前端架構（1）

摘要：前言想想也已經做過不少架構的項目了，有基于，基于，基于，基于的。好了，介紹完畢，接下來，我就從零開始，一步一步建起前后端完全分離的前端架構了。前言想想也已經做過不少架構的項目了，有基于vue，基于react，基于thinkPHP，基于laravel的。做多了，也就對現有的架構有各種想法，有好的，有壞的，總之，用起來還是不爽。vue-cli雖然可以很快地構建并使用，尤其是vue-c...

frolc 2019-06-24 17:56 評論0 收藏0
基于webpack的vue實例

摘要：配置文件根目錄下創建文件中的對象，用于處理目錄的對象，提高開發效率。引入我們編寫的測試用文件。這是我個人在學習vue+webpack的一個實例，希望對讀者是有用的，同時也求大神指教。菜鳥第一次寫這，水平有限。目錄結構 showImg(https://segmentfault.com/img/bVEnYI?w=646&h=290); 加載依賴在這之前確保安裝了node和npm ...

wums 2019-08-20 11:39 評論0 收藏0
vue2.x-cnode(vue全家桶)

摘要：后續會改成的版本安裝安裝編譯語法使用編譯語法圖片路徑與打包安裝引入圖片需要依賴的加載器樣式引入打包文件編譯打包引入樣式文件編譯 vue2.x-cnode 關于項目 vue2.x Cnode社區是基于vue、vue-router、vuex、axios、es6開發，使用webpack構建工具編譯打包項目如果此開源項目對大家學習vue的全家桶有幫助，請給我一個star,因為你的star讓我...

ThinkSNS 2019-08-20 14:26 評論0 收藏0