概要
兩種情況，在public下似谁，或src下,各種都有坑哼蛆；
注意：下述內(nèi)容均以vue-cli默認(rèn)配置為前提
一、圖片在public下咆爽，路徑需以/開頭
public 下的文件（包括圖片）會(huì)被直接復(fù)制到dist下梁棠，而不做其他處理，如：原來在public/myImage下的文件斗埂，會(huì)被復(fù)制到dist/myImage下符糊。這意味著我們只能通過絕對(duì)路徑引用 (使用 / 開頭的路徑)。如：
<img src = '/myImage/xxx.jpg'>
當(dāng)然呛凶，示例沒有使用動(dòng)態(tài)路徑男娄，動(dòng)態(tài)路徑同理；
巨坑：需要部署到web服務(wù)器的根路徑下
根路徑與二級(jí)路徑的簡(jiǎn)單區(qū)別：根路徑漾稀，就像Nginx的html下,tomcat的webapp,而在html或webapp下再創(chuàng)建文件夾用于放置打包完的文件（如:html/ui,webapp/ui）模闲，則為二級(jí)路徑。
如果需要部署到二級(jí)路徑下崭捍，則需要在路徑上加二級(jí)路徑的前綴尸折，假如二級(jí)路徑為OA,則上述圖片需要設(shè)為:
<img src = '/OA/myImage/xxx.jpg'>
這樣往往并不理想，因?yàn)橐粊矶鄠€(gè)地方引用缕贡，萬一改二級(jí)路徑名稱翁授，各個(gè)地方都得改，不利于維護(hù)晾咪，解決辦法是把這個(gè)二級(jí)路徑定義為一個(gè)常量收擦，可以放到環(huán)境變量里（.env文件），也可以放到一個(gè)公共js文件谍倦，甚至放到package.json里塞赂。這樣就可以到處引用了。
問題到此結(jié)束了嗎昼蛀？沒有宴猾！
因?yàn)楫a(chǎn)品部署是運(yùn)維人員做的，部署的二級(jí)路徑是不固定的叼旋，這個(gè)值由運(yùn)維人員決定仇哆。而運(yùn)維人員拿到的是打包完了的壓縮文件，所以這個(gè)配置二級(jí)路徑的文件必須保持不變（文件名和內(nèi)容保持不變）夫植，你一定想到了讹剔，那就是把文件放到public下油讯！具體做法是：
- 在public下創(chuàng)建env.js
- 在env.js里定義publicPath
- 把publicPath掛載到window下
- 在index.html里用script標(biāo)簽引入
- 5 .引用:使用window.publicPath即可
簡(jiǎn)易代碼如下：
//env.js
//單獨(dú)定義是為了便于運(yùn)維人員修改，使用var而不是const,是為了兼容低版本瀏覽器延欠，因?yàn)檫@部分代碼并不會(huì)被轉(zhuǎn)為ES5
var publicPath='/ui'
window.publicPath = publicPath
<!--index.html-->
<script src="<%= BASE_URL %>env.js"></script>
二陌兑、圖片在 src 下,使用require當(dāng)模塊引入
一般把圖片放在src/assets目錄下
使用require()引入，示例：
//path是在父組件傳過來的參數(shù)
const imgName = this.path.slice(1);
const src = require(`../../../assets/menuImage/${imgName}.gif`)
注意事項(xiàng)
1. require里最多進(jìn)行一次計(jì)算
就上述示例由捎，假如require里有兩個(gè)變量兔综，那么資源找不到，假如我把公共路徑前綴放到一個(gè)變量里：
//path是在父組件傳過來的參數(shù)
const imgName = this.path.slice(1);
const publicPath = '../../../assets/menuImage/';
const src = require(`${publicPath }${imgName}.gif`);
上述代碼無法正確找到文件Ｄ辍Ｈ沓邸！
2. 可以使用@为居，但不能使用/src
默認(rèn)碌宴，@代表/src,可以使用@杀狡，但是如果使用/src會(huì)無法找到資源蒙畴。@應(yīng)該是按相對(duì)路徑處理了。
//path是在父組件傳過來的參數(shù)
const imgName = this.path.slice(1);
const src = require(`@/assets/menuImage/${imgName}.gif`)
上述示例可以正確找到資源呜象。
