vue新構建項目打包如何在本地運行


正常的建立vue項目后

vue init webpack test
npm run start
npm run build 

會發現生成的dist包內的index.html在本地運行之后
並且在打包完控制台能看到一行小字tip
Tip: built files are meant to be served over an HTTP server.
Opening index.html over file:// won't work.

意思就是必須搭建服務器環境才能正常打開,實際vscode有一個插件能很方便的建立本地服務(插件市場搜索很容易找到):
Live Server

然后就能很方便的建立本地服務器環境了:

但是會發現打開來還是一片白
打開控制台看一下訪問路徑


能發現和實際文件存放地址是不一致的,所以是404
那說明打包后資源索引路徑不對,找到vue項目種config底下的index.js

里面有關於dev也有關於build的配置,找到build的配置,能發現一個assetsPublicPath的字段,

也就是說,默認的索引路徑是根目錄,所以在請求種會看到地址是這一段
http://127.0.0.1:5500/static/css/app.30790115300ab27614ce176899523b62.css
而不是實際的
http://127.0.0.1:5500/NewPortal/dist/static/css/app.30790115300ab27614ce176899523b62.css
所以只要把這里的'/'改成'./',然后重新打包,即可正常在本地打開index文件了# vue新構建項目打包如何在本地運行


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM