如何處理 Webpack 打包後空白頁面處理

解決前端框架(React、Vue)打包後頁面空白問題。

在使用使用前端框架開發都會碰到 webpack,專案完成後都會 npm run build 打包,然後上傳伺服器,但是打開網頁卻是空白,為什麼?

其實都是打包後的根目錄錯誤導致成的,所以打包前設置好路徑再進行打包,就可以。

以下針對幾種框架去說明:

▍Vue 2.x cli

建置一個檔案在根目錄,取名叫 vue.config.js。

module.exports = {  publicPath: './'}
新增檔案 config.js

▍Nuxt

執行 npm run generate指令會生成靜態網站但是 Nuxt 網站連結會錯誤,必須要到 nuxt.config.js 中去做一些設定。

export default {  mode: 'universal',  router: {    base: '/<填入>/'  }
}

router 中的要填入的會根據每次部屬環境不同而不同。

▍Create React App

package.json 中加入以下即可。

{  "homepage": "./",   // 加入此列}

寫文章除了可以分享知識給別人,同時也能整理自己的思想。

寫文章除了可以分享知識給別人,同時也能整理自己的思想。