成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

mushang / 2923人閱讀

摘要:在設(shè)置背景圖片,在項(xiàng)目打包后,圖層路徑會(huì)增加文件夾所在路徑。我們希望的情況下,背景圖路徑應(yīng)為,而實(shí)際則會(huì)出現(xiàn),注意,這里是多余的。解決方法有個(gè)在中直接設(shè)置在配置文件夾找到,作以下更改增加增加

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

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

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

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/116026.html

相關(guān)文章

  • 基于webpack下在vue使用scss背景圖片使用

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

    Alfred 評(píng)論0 收藏0
  • 從零開始做Vue前端架構(gòu)(1)

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

    frolc 評(píng)論0 收藏0
  • 基于webpackvue實(shí)例

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

    wums 評(píng)論0 收藏0
  • vue2.x-cnode(vue全家桶)

    摘要:后續(xù)會(huì)改成的版本安裝安裝編譯語法使用編譯語法圖片路徑與打包安裝引入圖片需要依賴的加載器樣式引入打包文件編譯打包引入樣式文件編譯 vue2.x-cnode 關(guān)于項(xiàng)目 vue2.x Cnode社區(qū)是基于vue、vue-router、vuex、axios、es6開發(fā),使用webpack構(gòu)建工具編譯打包項(xiàng)目 如果此開源項(xiàng)目對(duì)大家學(xué)習(xí)vue的全家桶有幫助,請(qǐng)給我一個(gè)star,因?yàn)槟愕膕tar讓我...

    ThinkSNS 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<