前言

本教程適用于 Vue-Cli v3 v4

網(wǎng)上教程零零散散,所以這里我作一下總結(jié),可能與您的代碼有所偏差,希望指出,但是勿噴.謝謝!

準(zhǔn)備

由于安的包比較多,所以,在我印象中這個(gè)教程安裝這兩個(gè)就行了
經(jīng)過(guò)測(cè)試,這兩個(gè)包可以不用安裝

cnpm i node-sass
cnpm i sass-loader

干正事

1. 首先找到我們根目錄[node_modules 同級(jí)]下的vue.config.js(沒(méi)有的話自己創(chuàng)建)

   // vue.config.js
   const path = require('path');
   
   function resolve(dir) {
       //__dirname為項(xiàng)目根目錄，node的express方法中也有使用，join為javascript連接符
       return path.join(__dirname, dir)  
   }
   
   module.exports = {
   
     // publicPath: process.env.NODE_ENV === 'production' ? '/public/' : '/',
     // assetsDir: "assets",
     // 上面兩行千萬(wàn)別設(shè)置,不然使用nginx部署的時(shí)候,會(huì)報(bào)錯(cuò)!!!!!!!!!!!!
   
   
   
     // chainWebpack這里是比較重要的
     chainWebpack: (config) => {
       config.resolve.alias
         .set('@', resolve('src'))
         .set('assets', resolve('src/assets'))
     },
     pluginOptions: {
       // 假設(shè)報(bào) style-resources-loader錯(cuò)誤,請(qǐng)安裝style-resources-loader;
       'style-resources-loader': {
         preProcessor: 'sass',
         patterns: []
       }
     }
   }
   

   這里說(shuō)明一下chainWebpack:
   圖片一般保存在public或src/assets文件夾里面,這里set('@', resolve('src'))做的事情就是將 @/assets變成成src/assets.

2. 來(lái)到我們的Style標(biāo)簽下面

   <style scoped lang='scss'> 
     /* 在標(biāo)簽中設(shè)置 lang='sass' */  
     .demo {
     background: url("~assets/img/BgImg.png") no-repeat;
     }
   </style>
   

   "~assets/img/BgImg.png"url前面必須帶有一個(gè)~,否則無(wú)法訪問(wèn)到我存放在assets里面的資源,

   后面的assets根據(jù)我們?cè)?vue.config.js 中的 chainWebpack set('assets', resolve('src/assets'))解析到了src/assets目錄,故訪問(wèn)到了我存在assets/img/BgImg.png中的資源圖片.

后記

這篇教程可能有很多不怎么專業(yè)的用詞,請(qǐng)看到的大佬幫忙指出.謝謝!