如何處理 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": "./",   // 加入此列
}