Vue筆記 | build後index沒畫面? 設定publicPath路徑

  • Post category:前端相關
  • Post last modified:2022-09-06
  • Reading time:1 mins read

vue專案做到一定程度想build來測試一下,但打開dist裡的index.html卻是空白的!
才發現是設定沒寫好~ 解法也很簡單:
在 vue.config.js 新增 publicPath: ‘./’ 就可以了。

publicPath是什麼東西呢?

publicPath代表的是在部屬打包好的檔案時要讀取的根路徑,可使用絕對路徑或相對路徑,設置成 ‘./’ 表示被打包出來的資料夾可以部屬在任意路徑,因為是讀取相對路徑。
在開發環境下也會生效,若是生產與開發在不同伺服器下,可以用環境變數的數值去做判斷。

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/production-sub-path/'
    : '/'
}

官方文件: https://cli.vuejs.org/zh/config/#publicpath