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)資源服務器上，而且還必須是根目錄！這很不好，很糟糕，所以需要修改配置。

解決方案

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

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

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

以上就是Vue 打包的靜態(tài)文件不能直接運行的原因及解決辦法的詳細內容，更多關于vue 打包靜態(tài)文件的資料請關注腳本之家其它相關文章！

您可能感興趣的文章:

Vue實現(xiàn)typeahead組件功能(非?？孔V)
本文給大家分享通過Vue寫一個挺靠譜的typeahead組件功能，非常不錯，具有參考借鑒價值，需要的的朋友參考下吧
2017-08-08
一文帶你搞懂Vue3?defineModel中的雙向綁定
隨著vue3.4版本的發(fā)布,defineModel也正式轉正了,它可以簡化父子組件之間的雙向綁定,是目前官方推薦的雙向綁定實現(xiàn)方式,下面就跟隨小編一起深入了解一下defineModel的使用吧
2024-02-02
Vue中的?watch監(jiān)聽屬性詳情
這篇文章主要介紹了Vue中的?watch監(jiān)聽屬性詳情，mputed計算屬性用來監(jiān)聽多個數(shù)據(jù)；watch?監(jiān)聽單個數(shù)據(jù)；本文將具體介紹的是?watch監(jiān)聽屬性，感興趣的小伙伴可以參考一下文章的具體內容，希望對你有所幫助
2021-12-12
解決Vue axios post請求,后臺獲取不到數(shù)據(jù)的問題方法
今天小編就為大家分享一篇解決Vue axios post請求,后臺獲取不到數(shù)據(jù)的問題方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
Element-Ui組件 NavMenu 導航菜單的具體使用
這篇文章主要介紹了Element-Ui組件 NavMenu 導航菜單的具體使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-10-10
iView-admin 動態(tài)路由問題的解決方法
這篇文章主要介紹了iView-admin 動態(tài)路由問題的解決方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2018-10-10
Vue3組件更新中的DOM?diff算法示例詳解
虛擬dom是當前前端最流行的兩個框架（vue和react）都用到的一種技術,都說他能幫助vue和react提升渲染性能,提升用戶體驗,下面這篇文章主要給大家介紹了關于Vue3組件更新中的DOM?diff算法的相關資料,需要的朋友可以參考下
2022-04-04
vue中node_modules中第三方模塊的修改使用詳解
這篇文章主要介紹了vue中node_modules中第三方模塊的修改使用,本文圖文并茂給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-05-05
使用vue實現(xiàn)點擊按鈕滑出面板的實現(xiàn)代碼
這篇文章主要介紹了使用vue實現(xiàn)點擊按鈕滑出面板的實現(xiàn)代碼，非常不錯，具有參考借鑒價值，需要的朋友參考下
2017-01-01
Vue中使用localStorage存儲token并設置時效
這篇文章主要為大家介紹了Vue中使用localStorage存儲token并設置時效，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-06-06