Vue 打包的靜態(tài)文件不能直接運(yùn)行的原因及解決辦法
問題
吾輩使用 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 生成的模板項目打包后的文件默認(rèn)需要放到靜態(tài)資源服務(wù)器上，而且還必須是根目錄！這很不好，很糟糕，所以需要修改配置。
解決方案
修改文件 _/config/index.js_，將 build.assetsPublicPath 屬性的值由 / 改為 ./
修改文件 _/build/utils.js_，在插件 ExtractTextPlugin 中添加 publicPath: '../../'
那么，使用 npm run build 重新打包后的靜態(tài)文件應(yīng)該就可以直接打開啦
以上就是Vue 打包的靜態(tài)文件不能直接運(yùn)行的原因及解決辦法的詳細(xì)內(nèi)容，更多關(guān)于vue 打包靜態(tài)文件的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Vue實現(xiàn)typeahead組件功能(非?？孔V)
本文給大家分享通過Vue寫一個挺靠譜的typeahead組件功能，非常不錯，具有參考借鑒價值，需要的的朋友參考下吧2017-08-08
隨著vue3.4版本的發(fā)布,defineModel也正式轉(zhuǎn)正了,它可以簡化父子組件之間的雙向綁定,是目前官方推薦的雙向綁定實現(xiàn)方式,下面就跟隨小編一起深入了解一下defineModel的使用吧2024-02-02
這篇文章主要介紹了Vue中的?watch監(jiān)聽屬性詳情，mputed計算屬性用來監(jiān)聽多個數(shù)據(jù)；watch?監(jiān)聽單個數(shù)據(jù)；本文將具體介紹的是?watch監(jiān)聽屬性，感興趣的小伙伴可以參考一下文章的具體內(nèi)容，希望對你有所幫助2021-12-12
解決Vue axios post請求,后臺獲取不到數(shù)據(jù)的問題方法
今天小編就為大家分享一篇解決Vue axios post請求,后臺獲取不到數(shù)據(jù)的問題方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
Element-Ui組件 NavMenu 導(dǎo)航菜單的具體使用
這篇文章主要介紹了Element-Ui組件 NavMenu 導(dǎo)航菜單的具體使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
這篇文章主要介紹了iView-admin 動態(tài)路由問題的解決方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-10-10
虛擬dom是當(dāng)前前端最流行的兩個框架（vue和react）都用到的一種技術(shù),都說他能幫助vue和react提升渲染性能,提升用戶體驗,下面這篇文章主要給大家介紹了關(guān)于Vue3組件更新中的DOM?diff算法的相關(guān)資料,需要的朋友可以參考下2022-04-04
這篇文章主要介紹了vue中node_modules中第三方模塊的修改使用,本文圖文并茂給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-05-05
使用vue實現(xiàn)點擊按鈕滑出面板的實現(xiàn)代碼
這篇文章主要介紹了使用vue實現(xiàn)點擊按鈕滑出面板的實現(xiàn)代碼，非常不錯，具有參考借鑒價值，需要的朋友參考下2017-01-01
Vue中使用localStorage存儲token并設(shè)置時效
這篇文章主要為大家介紹了Vue中使用localStorage存儲token并設(shè)置時效，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06