處理資源路徑
當(dāng)你在js预愤、css 或者*.vue文件中使用相對(duì)路徑（必須以 . 開(kāi)頭）引用一個(gè)靜態(tài)資源時(shí)洁桌，該資源將被webpack處理。
轉(zhuǎn)換規(guī)則
- 如果URL是一個(gè)絕對(duì)路徑案腺，它將會(huì)被保留不變。
<img alt="logo" src="/assets/logo.png"/>
<img alt="logo" src="https://image.xxx.com/logo.png"/>
- 如果URL以 . 開(kāi)頭會(huì)作為一個(gè)相對(duì)模塊請(qǐng)求被解釋并基于文件系統(tǒng)的相對(duì)路徑康吵。
<img alt="logo" src="./assets/logo.png"/>
- 如果URL以 ~ 開(kāi)頭會(huì)作為一個(gè)模塊請(qǐng)求被解析劈榨。這意味著你甚至可以Node模塊中的資源。
<img alt="logo" src="～some-npm-package/logo.png"/>
- 如果URL以 @ 開(kāi)頭會(huì)作為一個(gè)模塊請(qǐng)求被解析晦嵌。Vue Cli默認(rèn)會(huì)設(shè)置一個(gè)指向 src 的別名 @同辣。
<img alt="logo" src="@/component/logo.png"/>
通過(guò)webpack處理并獲取有如下好處：
- 腳本和樣式表會(huì)被壓縮且打包在一起，從而避免額外的網(wǎng)絡(luò)請(qǐng)求惭载。
- 文件丟失會(huì)直接在編譯的時(shí)候報(bào)錯(cuò)旱函，而不是產(chǎn)生404錯(cuò)誤。
- 最終生產(chǎn)的文件名稱包含了內(nèi)容哈希值描滔，不必?fù)?dān)心瀏覽器有緩存棒妨。
有如下情況時(shí)，請(qǐng)考慮將資源放置在public文件夾下
- 需要在構(gòu)建輸出中一個(gè)固定的文件名字含长。
- 有大批量的圖片券腔，需要?jiǎng)討B(tài)引用他們的路徑。
- 有些庫(kù)與webpack不兼容拘泞，需要用獨(dú)立的script標(biāo)簽將其引入纷纫。
使用public文件夾的注意事項(xiàng)
- 如果你的程序沒(méi)有部署在域名的根目錄，那么需要為URL配置 publicPath 前綴
// vue.config.js
module.exports = {
publicPath:process.env.NODE_ENV === 'production'
? '/路徑/'
:'/'
}
- 在 public/index.html 等通過(guò) html-webpack-plugin 用作模版的 HTML頁(yè)面中田弥，你需要設(shè)置鏈接前綴涛酗。
<link rel='icon' href="<%= BASE_URL =%>favicon.ico">
