問題

吾輩使用 vue-cli 直接生成的 vue 模板專案，在模板之上繼續開發的。然而在使用 npm run build 打包專案時，卻發現打包好的專案在瀏覽器中直接開啟好像什麼都沒有？

原因

查看了一下打包後的 index.html 原始碼，終於發現了一個重要的點：

所有涉及到路徑的地方全都是以 / 開頭的

下面是吾輩打包後生成的 dist 目錄

dist:.
│ index.html
│
└─static
  ├─css
  │   app.b7bce283257fbd427fb1dc3fea80cee1.css
  │   app.b7bce283257fbd427fb1dc3fea80cee1.css.map
  │
  ├─fonts
  │   MaterialIcons-Regular.012cf6a.woff
  │   MaterialIcons-Regular.570eb83.woff2
  │   MaterialIcons-Regular.a37b0c0.ttf
  │   MaterialIcons-Regular.e79bfd8.eot
  │
  └─js
      app.58cce746b2fe4ac2f2b9.js
      app.58cce746b2fe4ac2f2b9.js.map
      manifest.2ae2e69a05c33dfc65f8.js
      manifest.2ae2e69a05c33dfc65f8.js.map
      vendor.a32972498ed8de656202.js
      vendor.a32972498ed8de656202.js.map

這下很清楚了，vue-cli 生成的模板專案打包後的檔案預設需要放到靜態資源伺服器上，而且還必須是根目錄！這很不好，很糟糕，所以需要修改配置。

解決方案

修改檔案 _/config/index.js_，將 build.assetsPublicPath 屬性的值由 / 改為 ./

修改檔案 _/build/utils.js_，在外掛 ExtractTextPlugin 中新增 publicPath: '../../'

那麼，使用 npm run build 重新打包後的靜態檔案應該就可以直接開啟啦

以上就是Vue 打包的靜態檔案不能直接執行的原因及解決辦法的詳細內容，更多關於vue 打包靜態檔案的資料請關注我們其它相關文章！