正常的建立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新構建項目打包如何在本地運行