react打包後頁面空白

2021-10-06 16:21:53 字數 1950 閱讀 1742

"scripts":
這兩條指令的意思:

npm run dev 執行的檔案build/dev-server.js檔案,執行了:

檢查node和npm版本

引入相關外掛程式和配置

建立express伺服器和webpack編譯器

配置開發中介軟體(webpack-dev-middleware)和熱過載中介軟體(webpack-hot-middleware)

掛載**服務和中介軟體

配置靜態資源

啟動伺服器監聽特定視窗(8080)

說明:express伺服器是提供靜態檔案服務,不過它還使用了http-proxy-middleware。

乙個http請求**的中介軟體,前端開發過程中需要使用到後台的api的話,

可以通過配置proxytable來將相應的後台請求**到專用的api伺服器。

配置webpack編譯入口

配置webpack輸出路徑和明明規則

配置模組resolve規則

配置不同型別模組的處理規則

這個配置裡面只配置了.js 、.vue、、字型等幾類檔案的處理規則額,如果需要處理器她檔案可以在 module.rules裡面配置。

dev-server依賴的webpack配置是webpack.dev.conf.js檔案,測試環境下使用的是webpack.base.conf.js,webpack.dev.conf.js中又引用了webpack.base.conf.js,webpack.base.conf.js主要完成了下面這些事情:

配置webpack編譯入口

配置webpack輸出路徑和明明規則

配置模組resolve規則

配置不同型別模組的處理規則 

這個配置裡面只配置了.js 、.vue、、字型等幾類檔案的處理規則額,如果需要處理器她檔案可以在 module.rules裡面配置。

build/webpack.dev.conf.js

在webpack.base.conf.js的基礎上增加完善了開發環境下面的配置,主要包括下面幾件事情:

webpack配置檔案中使用到了utils.js和vue-loader這兩個檔案,utils主要完成下面三件事:

配置靜態資源路徑

生成cssloaders用於載入.vue檔案中的樣式

生成styleloaders用於載入不在.vue檔案中的單獨存在的樣式檔案

vue-loader.conf則只配置了css載入器以及編譯css之後自動新增字首。

構建環境下的配置,build.js主要完成下面幾件事:

loading動畫

刪除建立目標資料夾

webpack編譯

輸出資訊

構建的時候用到的webpack配置來自webpack.prod.conf.js,該配置同樣是在webpack.base.conf基礎上的進一步完善。

主要完成下面幾件事情: 

- 合併基礎的webpack配置 

- 使用styleloaders 

- 配置webpack的輸出 

- 配置webpack外掛程式 

- gzip模式下的webpack外掛程式配置 

- webpack-bundle分析

說明: webpack外掛程式裡面多了醜化壓縮**以及抽離css檔案等外掛程式。

config資料夾分析

config/index.js

config資料夾下最主要的檔案就是index.js了,在這裡面描述了開發和構建兩種環境下的配置,前面的build資料夾下也有不少檔案引用了index.js裡面的配置。

config/dev.env.js、config/prod.env.js和config/test.env.js

這三個檔案就簡單設定了環境變數而已,沒什麼特別的。這是webpack的基本入門,webpack還有很多外掛程式,還需要去探索。後面寫這幾個檔案的原始碼解釋。

解決vue打包後是空白頁面

有的小夥伴可能在剛完成乙個vue專案的時候,要打包上線了,在打包完成後開啟專案檢視一下發現頁面是一片空白,後來開啟控制台看,發現會有這樣的報錯出現。這是怎麼回事呢?因為在你打包專案的時候打包的路徑出現了問題,你打包的是專案給你預設的絕對路徑,我們只要把配置裡的絕對路徑改為相對路徑就可以顯示出頁面後來...

React 打包後部署到伺服器子頁面空白問題

執行npm run build 將react打包後部署到伺服器子路徑 例如 更目錄為root 子路徑為system root system 發現部署到伺服器之後,f12開發者模式發現資源檔案引用錯誤 步驟 1 在專案package.json 新增 homepage 或者在node modules r...

WSS安裝後的頁面空白解決

此時,開啟wamp64 www wss config tankdb config.php檔案 本人安裝的是64位wampserver 將第二行的error reporting 0 注釋掉,儲存後,重新開啟 localhost wss index.php,此時,介面上出現了幾行錯誤 解決方法 查詢ph...