前言
本教程適用于 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", // 上面兩行千萬別設定,不然使用nginx部署的時候,會報錯!!!!!!!!!!!! // 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"url前面必須帶有一個~,否則無法訪問到我存放在assets里面的資源,后面的
assets根據我們在 vue.config.js 中的chainWebpackset('assets', resolve('src/assets'))決議到了src/assets目錄,故訪問到了我存在assets/img/BgImg.png中的資源圖片.
后記
這篇教程可能有很多不怎么專業的用詞,請看到的大佬幫忙指出.謝謝!
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/21674.html
標籤：JavaScript
下一篇：vue 開發環境的搭建