Vue-cli構建項目, 組件中js代碼引入圖片路徑問題

問題描述

• .vue的組件分紅三個部分, template結構部分, script路徑代碼, style頁面樣式
• 首先, 咱們能夠在template能夠正確引入, 不管是dev, 仍是build都沒有問題, 在style中引入背景圖的話, 咱們在上一篇文章中已經解決.
• 此次咱們發現若是須要在js代碼中控制圖片路徑的顯示, 使用:src的話, 直接寫是錯誤的, 並不能打包, 在 dev 和 build 都是錯誤的, 都不能正確讀取.
• 這就是咱們的問題:
• 在組件的js中, 若是存在路徑, 不能被爭取讀取

解決方法

理解在webpack中一切皆模塊的思想: 將全部的圖片按照模塊進行處理

• 即新建一個文件, 而後使用 import 引入全部的圖片, 使用便可.

• 具體代碼以下:

// src/config/images.js

import head01 from '../img/1.jpg'
import head02 from '../img/2.jpg'
import background from '../img/background.jpg'

export default {
  head01: head01,
  head02: head02,
  background: background
}

// src/components/TimeBox.vue

<script>
import img from '../config/images.js'
export default {
  name: 'TimeBox',
  data () {
    return {
      imgUrl: img.head01
    }
  }
}
</script>

解決思路

修改配置

• 開始時, 入坑了, 老是覺得要像scss那樣, 須要修改配置項才行.
• 最後確定是不行的, 沒有找到這樣的配置項, 也暴露出我在webpack上太菜, 連最基本的都尚未搞清楚

絕對路徑

• 採用絕對路徑後, 在dev的時候, 的確把問題解決了,
• 可是須要在把圖片放到static目錄下面, 其實也是一種方法.
• 可是不知道爲何, 打包以後, 依舊不能成功讀取.這就讓人很絕望了, 由於打包以後再也不是相對路徑, 咱們須要一個相對路徑才行

引入模塊

• 這也是webpack的精髓吧, 一切皆模塊
• 只是如今尚未能好好理解模塊化的思想, 也沒有把模塊化的概念掌握.