npm run build 打包後檔案不能正常訪問

2021-08-19 00:20:22 字數 1471 閱讀 8432

目前,使用vue-cli腳手架寫了乙個前端專案,之前一直是使用npm run dev 在8080埠上進行本地除錯。專案已經進行一半了,今天有時間突然想使用npm run build進行上線打包,試試能否成功看到我的專案效果。一開始是毫無頭緒,什麼都不懂,直接是就在命令列上敲下:npm run build命令。

好開心啊,竟然沒有報錯。以為就這麼簡單的成功了,在瀏覽器上輸入:http://localhost/mgt/learnvuex/dist/index.html,一片空白。果然沒有那麼順利。開啟控制,看到console下出現了很多錯誤。

這段話的意思就是說:構建檔案務必放在乙個http伺服器。直接開啟index.html檔案將不工作。

看到提示還是要好好看的,這毛病要改呀!

那麼問題來了,怎麼解決呢?

我們知道打包的命令檔案是config/build.js

到專案目錄下的config資料夾裡的index.js檔案中,將build物件下的assetspublicpath中的「/」,改為「./」即可,就在前面加個點就可以了,

現在再重新打包一次npm run build,重新整理你的頁面,就可以看到啦

在這之前有乙個前提條件,那就是電腦上要安裝伺服器。只要你的伺服器上有支援http或者https的伺服器軟體就可以,我知道的有nginx和apache兩種,只要安裝了兩個中的乙個,並且配合好訪問路徑,把你生成的檔案放到伺服器下或者對映路徑下,啟動你的伺服器軟體即可,然後就可以使用你配置的路徑訪問專案。

我在瀏覽器上直接是輸入localhost,開啟檔案目錄的,http://localhost/mgt/learnvuex/dist/index.html,這麼檔案到底是在哪個盤下面呢?

我在電腦上上安裝了乙個xampp,並把apache的對映路徑設定為:e:/project,而我的專案檔案就放在e:/project目錄下面 這就是我的:e:\project\mgt\learnvuex\dist。

所以在瀏覽器上輸入:localhost,就是開啟e:/project,就可以看到這目錄下的所以專案檔案啦。

vue使用npm run build命令打包

在本地除錯的時候只要命令列執行npm run dev就可以把這個專案跑起來,但是現在我們要把他放到伺服器上的話需要npm run build命令 1.win r 輸入 cmd 2.進入專案檔案 如 d盤 下的 vue demo 如下操作 d 進入d盤 cd vue demo 進入資料夾 執行npm ...

vue使用npm run build命令打包

當我們使用vue cli腳手架完成乙個專案的時候,下一步肯定會想要怎麼把這個專案放到網際網路上或者本地直接開啟呢,我們在本地除錯的時候只要命令列執行npm run dev就可以把這個專案跑起來,但是現在我們要把他放到伺服器上的話用npm run build命令就可以啦。命令列執行npm run bu...

npm run build報錯問題

這個問題我一開始認為是專案中存在about.js的依賴,但是不存在about.js的檔案導致。call retries were exceeded 翻譯過來是 重試超時,感覺也沒有參考價值。看了很多部落格都是先刪除包npm unintall然後在npm install,但是毫無效果。最終測試發現是本...