Vue 打包的靜態(tài)文件不能直接運行的原因及解決辦法
更新時間：2020年11月19日 11:24:44 作者：rxliuli
這篇文章主要介紹了Vue 打包的靜態(tài)文件不能直接運行的原因及解決辦法，幫助大家更好的理解和學習vue框架，感興趣的朋友可以了解下
問題
吾輩使用 vue-cli 直接生成的 vue 模板項目，在模板之上繼續(xù)開發(fā)的。然而在使用 npm run build 打包項目時，卻發(fā)現(xiàn)打包好的項目在瀏覽器中直接打開好像什么都沒有？
原因
查看了一下打包后的 index.html 源碼，終于發(fā)現(xià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 生成的模板項目打包后的文件默認需要放到靜態(tài)資源服務(wù)器上，而且還必須是根目錄！這很不好，很糟糕，所以需要修改配置。
解決方案
修改文件 _/config/index.js_，將 build.assetsPublicPath 屬性的值由 / 改為 ./
修改文件 _/build/utils.js_，在插件 ExtractTextPlugin 中添加 publicPath: '../../'
那么，使用 npm run build 重新打包后的靜態(tài)文件應(yīng)該就可以直接打開啦
以上就是Vue 打包的靜態(tài)文件不能直接運行的原因及解決辦法的詳細內(nèi)容，更多關(guān)于vue 打包靜態(tài)文件的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了Vue中的同步和異步調(diào)用順序，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-01-01
vue+springboot上傳大文件的實現(xiàn)示例
本文主要介紹了vue+springboot上傳大文件的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04
這篇文章主要給大家介紹了關(guān)于如何一步步基于element-ui封裝查詢組件的相關(guān)資料,本文通過示例代碼介紹的非常詳細,對大家學習或者使用vue.js具有一定的參考學習價值,需要的朋友可以參考下2021-10-10
這篇文章主要為大家詳細介紹了VUE前端cookie簡單操作代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
Vue如何根據(jù)id在數(shù)組中取出數(shù)據(jù)
這篇文章主要介紹了Vue如何根據(jù)id在數(shù)組中取出數(shù)據(jù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章小編要與大家分享的是建立和維護大型 Vue.js 項目的 10 個最佳實踐，需要的小伙伴請和小編一起學習下面文章的具體內(nèi)容吧2021-09-09
vue長列表優(yōu)化之虛擬列表實現(xiàn)過程詳解
前端的業(yè)務(wù)開發(fā)中會遇到不使用分頁方式來加載長列表的需求,下面這篇文章主要給大家介紹了關(guān)于vue長列表優(yōu)化之虛擬列表實現(xiàn)的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-08-08
vue3不能使用history.pushState修改url參數(shù)踩坑
這篇文章主要為大家介紹了vue3不能使用history.pushState修改url參數(shù)踩坑解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
這篇文章主要為大家詳細介紹了如何利用Vue實現(xiàn)向PDF文件中添加二維碼的功能，文中的示例代碼講解詳細，感興趣的小伙伴可以了解一下2023-06-06
這篇文章主要介紹了vue中注冊自定義的全局js方法,文中給大家補充介紹了vue自定義函數(shù)掛到全局的方法，需要的朋友可以參考下2019-11-11