Vue 打包的靜態文件不能直接運行的原因及解決辦法

問題

吾輩使用 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 打包靜態文件的資料請關注好吧啦網其它相關文章！