1. 程式人生 > >Vue -- Vue打包後背景圖片路徑錯誤

Vue -- Vue打包後背景圖片路徑錯誤

Vue專案中使用圖片的方法有如下幾種:

1、圖片資源放在 assets -> imgs資料夾下面

①img標籤引入圖片

<img src="../assets/imgs/bg.png" class="loginImg" />

②css使用圖片
background: url('../assets/imgs/loginback.png') no-repeat top left ;

2、圖片資源放在static->imgs資料夾下面

①img標籤引入圖片
<img src="../../static/imgs/bg.png" class="loginImg"
/>
②css使用圖片
background: url('../../static/img/loginback.png') no-repeat top left ;

Vue專案打包之前需要修改一下配置檔案

1、build/utils.js

新增 publicPath:’../../’
這裡寫圖片描述

2、config/index.js

assetsPublicPath: ‘/’ 修改成 assetsPublicPath: ‘./’,
這裡寫圖片描述