快捷導(dǎo)航

Vue 打包的靜態(tài)文件不能直接運(yùn)行的原因及解決辦法

更新時(shí)間：2020年11月19日 11:24:44 作者：rxliuli

這篇文章主要介紹了Vue 打包的靜態(tài)文件不能直接運(yùn)行的原因及解決辦法，幫助大家更好的理解和學(xué)習(xí)vue框架，感興趣的朋友可以了解下

問(wèn)題

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

原因

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

所有涉及到路徑的地方全都是以 / 開(kāi)頭的

下面是吾輩打包后生成的 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 屬性的值由 / 改為 ./

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

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

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

您可能感興趣的文章:

相關(guān)文章

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