1. 程式人生 > 實用技巧 >Vue/Cli4引用靜態圖片

Vue/Cli4引用靜態圖片

前言

本教程適用於 Vue-Cli v3 v4

網上教程零零散散,所以這裡我作一下總結,可能與您的程式碼有所偏差,希望指出,但是勿噴.謝謝!

準備

由於安的包比較多,所以,在我印象中這個教程安裝這兩個就行了

cnpm i node-sass
cnpm i sass-loader

幹正事

  1. 首先找到我們根目錄[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.

  2. 來到我們的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 中的 chainWebpack set('assets', resolve('src/assets'))解析到了src/assets目錄,故訪問到了我存在assets/img/BgImg.png中的資源圖片.

後記

這篇教程可能有很多不怎麼專業的用詞,請看到的大佬幫忙指出.謝謝!