React使用公共文件夾public問題

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

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

React使用公共文件夾public

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

兩者區(qū)別

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

而src/assets目錄的文件（前提你在js中有引入），它會被webpack編譯，比如圖片，如果你的圖片小于你在webpack中的loader下設置的limit大小（可配置），它會被編譯成base64，從而在實際項目中減少http請求

放置在src/assets目錄有以下幾點好處：

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

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

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

在React中使用公共文件夾public

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

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

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

當運行npm run build，Create React App將替換%PUBLIC_URL%為正確的絕對路徑，因此即使使用客戶端路由或將其托管在非根URL上，項目也會正常工作。

在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" />
		<!-- 用于配置瀏覽器頁簽+地址欄的顏色(僅支持安卓手機瀏覽器) -->
    <meta name="theme-color" content="red" />
    <meta
      name="description"
      content="Web site created using create-react-app"
		/>
		<!-- 用于指定網(wǎng)頁添加到手機主屏幕后的圖標 -->
		<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" rel="external nofollow"  />
		<!-- 應用加殼時的配置文件 -->
		<link rel="manifest" href="%PUBLIC_URL%/manifest.json" rel="external nofollow"  />
    <title>React App</title>
  </head>
  <body>
		<!-- 若瀏覽器不支持js則展示標簽中的內容 -->
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>