使用Vue 打包靜態(tài)文件無法運(yùn)行如何解決

發(fā)布時(shí)間：2020-11-19 14:14:57 來源：億速云閱讀：218 作者：Leah 欄目：開發(fā)技術(shù)

使用Vue 打包靜態(tài)文件無法運(yùn)行如何解決？很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

使用 vue-cli 直接生成的 vue 模板項(xiàng)目，在模板之上繼續(xù)開發(fā)的。然而在使用 npm run build 打包項(xiàng)目時(shí)，卻發(fā)現(xiàn)打包好的項(xiàng)目在瀏覽器中直接打開好像什么都沒有？

原因

查看了一下打包后的 index.html 源碼，終于發(fā)現(xiàn)了一個(gè)重要的點(diǎn)：

使用Vue 打包靜態(tài)文件無法運(yùn)行如何解決

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

下面是吾輩打包后生成的 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 生成的模板項(xiàng)目打包后的文件默認(rèn)需要放到靜態(tài)資源服務(wù)器上，而且還必須是根目錄！這很不好，很糟糕，所以需要修改配置。

解決方案

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

使用Vue 打包靜態(tài)文件無法運(yùn)行如何解決

修改文件 _/build/utils.js_，在插件 ExtractTextPlugin 中添加 publicPath: '../../'

使用Vue 打包靜態(tài)文件無法運(yùn)行如何解決

那么，使用 npm run build 重新打包后的靜態(tài)文件應(yīng)該就可以直接打開啦

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝您對(duì)億速云的支持。

向AI問一下細(xì)節(jié)

使用Vue 打包靜態(tài)文件無法運(yùn)行如何解決

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽