快捷導(dǎo)航

React使用公共文件夾public問題

更新時(shí)間：2022年12月01日 17:07:10 作者：叉叉醬

這篇文章主要介紹了React使用公共文件夾public問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

React使用公共文件夾public

在剛學(xué)React/Vue的時(shí)候，配合webpack腳手架學(xué)習(xí)的過程中，碰到一個(gè)問題會非常疑惑，比如在React中有個(gè)Public文件夾可以放靜態(tài)資源，但是在src目錄中同樣有個(gè)assets文件夾，這個(gè)同樣也是放靜態(tài)資源的，這個(gè)就很困惑了，為何放置靜態(tài)資源的地方會有兩個(gè)？

兩者區(qū)別

其實(shí)放在兩個(gè)文件夾區(qū)別就在于是否會被webpack所處理，如果您將文件放入該public文件夾，webpack 將不會處理它，在你打包的時(shí)候，會將public文件夾直接復(fù)制一份到你構(gòu)建出來的文件夾中。

而src/assets目錄的文件（前提你在js中有引入），它會被webpack編譯，比如圖片，如果你的圖片小于你在webpack中的loader下設(shè)置的limit大?。膳渲茫?，它會被編譯成base64，從而在實(shí)際項(xiàng)目中減少http請求

放置在src/assets目錄有以下幾點(diǎn)好處：

腳本和樣式表被縮小并捆綁在一起以避免額外的網(wǎng)絡(luò)請求。
缺少文件會導(dǎo)致編譯錯(cuò)誤，而不是用戶的404錯(cuò)誤。
結(jié)果文件名包含內(nèi)容哈希，因此您無需擔(dān)心瀏覽器緩存舊版本。

當(dāng)然，在實(shí)際項(xiàng)目中，公共文件夾public還是有它的作用的，如果你希望你的文件不被編譯，比如jquery.min.js，或者壓縮好的js插件等，你就可以把文件放在public文件夾中，這樣還可以減少文件構(gòu)建時(shí)間，可以減少構(gòu)建文件的大小。

換過來想，如果你把所有靜態(tài)資源全部放在assets文件夾中，你會發(fā)現(xiàn)最后打包出來的文件很大，導(dǎo)致首頁白屏?xí)r間過長，所以，你可以把一些不會改動的靜態(tài)文件放到public中。

在React中使用公共文件夾public

如果在index.html中，你可以像這樣去使用它：

<img src="%PUBLIC_URL%/image/poster.jpeg" alt="">

只有前綴public可以訪問文件夾中的文件%PUBLIC_URL%。如果需要使用src或中的文件node_modules，則必須將其復(fù)制到那里以明確指定將此文件作為構(gòu)建的一部分的意圖。

當(dāng)運(yùn)行npm run build，Create React App將替換%PUBLIC_URL%為正確的絕對路徑，因此即使使用客戶端路由或?qū)⑵渫泄茉诜歉鵘RL上，項(xiàng)目也會正常工作。

在JavaScript代碼中，可以process.env.PUBLIC_URL出于類似目的使用：

render() {
? ? return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;
}

React腳手架public文件介紹

public文件夾下index.js

<!DOCTYPE html>
<html lang="en">
  <head>
		<meta charset="utf-8" />
		<!-- %PUBLIC_URL%代表public文件夾的路徑 -->
		<link rel="icon" href="%PUBLIC_URL%/favicon.ico" rel="external nofollow"  />
		<!-- 開啟理想視口，用于做移動端網(wǎng)頁的適配 -->
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<!-- 用于配置瀏覽器頁簽+地址欄的顏色(僅支持安卓手機(jī)瀏覽器) -->
    <meta name="theme-color" content="red" />
    <meta
      name="description"
      content="Web site created using create-react-app"
		/>
		<!-- 用于指定網(wǎng)頁添加到手機(jī)主屏幕后的圖標(biāo) -->
		<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" rel="external nofollow"  />
		<!-- 應(yīng)用加殼時(shí)的配置文件 -->
		<link rel="manifest" href="%PUBLIC_URL%/manifest.json" rel="external nofollow"  />
    <title>React App</title>
  </head>
  <body>
		<!-- 若瀏覽器不支持js則展示標(biāo)簽中的內(nèi)容 -->
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>