Vue/Cli4引用靜態圖片
阿新 • • 發佈:2020-07-30
前言
本教程適用於 Vue-Cli v3 v4
網上教程零零散散,所以這裡我作一下總結,可能與您的程式碼有所偏差,希望指出,但是勿噴.謝謝!
準備
由於安的包比較多,所以,在我印象中這個教程安裝這兩個就行了
cnpm i node-sass
cnpm i sass-loader
幹正事
-
首先找到我們根目錄[node_modules 同級]下的vue.config.js(沒有的話自己建立)
// vue.config.js const path = require('path'); function resolve(dir) { //__dirname為專案根目錄,node的express方法中也有使用,join為javascript連線符 return path.join(__dirname, dir) } module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/public/' : '/', assetsDir: "assets", // chainWebpack這裡是比較重要的 chainWebpack: (config) => { config.resolve.alias .set('@', resolve('src')) .set('assets', resolve('src/assets')) }, pluginOptions: { // 假設報 style-resources-loader錯誤,請安裝style-resources-loader; 'style-resources-loader': { preProcessor: 'sass', patterns: [] } } }
這裡說明一下chainWebpack:
圖片一般儲存在public或src/assets資料夾裡面,這裡set('@', resolve('src'))
做的事情就是將@/assets
變成成src/assets
. -
來到我們的Style標籤下面
<style scoped lang='scss'> /* 在標籤中設定 lang='sass' */ .demo { background: url("~assets/img/BgImg.png") no-repeat; } </style>
"~assets/img/BgImg.png"
~
,否則無法訪問到我存放在assets裡面的資源,後面的
assets
根據我們在 vue.config.js 中的chainWebpack
set('assets', resolve('src/assets'))
解析到了src/assets
目錄,故訪問到了我存在assets/img/BgImg.png中的資源圖片.
後記
這篇教程可能有很多不怎麼專業的用詞,請看到的大佬幫忙指出.謝謝!