vue-cli構建專案 npm run build打包後怎麼在本地檢視效果
本文以vue官方腳手架vue-cli構建的專案為例。
執行npm run dev以開發模式開啟除錯好了你的案例程式;你還不滿足於僅僅把程式碼放在github上,想把專案打包,然後在本地預覽或者放在個人部落格上供大家直接看效果學習。
這時如果直接執行npn run build是可以執行並打包你的程式碼的,不會報任何異常或錯誤,但是會看到打包完成有這樣一句提示:
看到這裡第一感覺:不是警告色,應該沒啥問題,(也許是英語不過關也許是懶得不想看反正是沒看這段提示是什麼意思)抱著試試看的僥倖心理,默默用瀏覽器打開了剛build生成的dist目錄下的index.html檔案!
然而驚奇地發現網頁一片空白,絲毫沒有一點點痕跡。打開了控制檯,看到console tab下一片404的各種找不到資源
解決方案
開啟專案資料夾。找到config資料夾裡的index.js檔案中的build物件,將assetsPublicPath中的“/”,改為“./”,並在build\build.js將這兩句的提示資訊刪掉或註釋掉,再打包直接用瀏覽器直接執行就好了。
親測有效
相關推薦
vue-cli構建專案npm run build打包後怎麼在本地檢視效果
這時如果直接執行npn run build是可以執行並打包你的程式碼的,不會報任何異常或錯誤,但是會看到打包完成有這樣一句提示: 打開了控制檯,看到console tab下一片404的各種找不到資源 解決方案 開啟專案資料夾。找到config資料夾裡的index.
vue-cli構建專案 npm run build打包後怎麼在本地檢視效果
本文以vue官方腳手架vue-cli構建的專案為例。 執行npm run dev以開發模式開啟除錯好了你的案例程式;你還不滿足於僅僅把程式碼放在github上,想把專案打包,然後在本地預覽或者放在個人部落格上供大家直接看效果學習。 這時如果直接執
vue-cli項目npm run build後,index.html無法在瀏覽器打開
net ons enter 圖片 AR center 文件 sdn npm 一 般打包的時候命令行會出現如下錯誤提示: 然後去dist文件夾運行index.html。在瀏覽器裏會發生如下錯誤提示: 先在config/index.js把原本是/改成./,然後再去bu
vue-cli 腳手架執行npm run build 執行出錯的問題
以下是打包的時候報錯的地方。執行出錯後,CSS都沒有打包成功,加粗內容為重要內容 Asset Size Chunks Chunk Names
npm run build 打包後,如何運行在本地查看效果
將不 npm -s 問題 dev nginx 瀏覽器 wid pro 目前,使用vue-cli腳手架寫了一個前端項目,之前一直是使用npm run dev 在8080端口上進行本地調試。項目已經進行一半了,今天有時間突然想使用npm run build進行上線打包,試試能否
npm run build 打包後,如何執行在本地檢視效果(Nginx服務)
這段時間,有點時間,研究了一下vue 打包的很慢的問題。但是當我 npm run build 打包後,在本地檢視效果的時候,活生生被我老大鄙視了,因為我打開了XAMPP。他說:你怎麼不用Nginx啊?用這個一堆的路徑問題!!!!!! 然後我就去研究了N
npm run build 打包後,如何運行在本地查看效果(Nginx服務)
get 工具 下載 inf 使用 執行 是我 map lan 這段時間,有點時間,研究了一下vue 打包的很慢的問題。但是當我 npm run build 打包後,在本地查看效果的時候,活生生被我老大鄙視了,因為我打開了XAMPP。他說:你怎麽不用Nginx
npm run build 打包後頁面無法顯示問題
今早運維小哥哥跑來找我,想給我的新專案發個版,我還是按照一般流程npm run build 然後git提交,打個tag v1.0.1,運維小哥哥說你前端頁面沒寫好嘛? emmmm….老孃早就寫好了。肯定是哪裡出了問題,我開啟一看果然有問題。 果然啥都沒
npm run build 打包後,如何執行在本地檢視效果
好開心啊,竟然沒有報錯。以為就這麼簡單的成功了,在瀏覽器上輸入:http://localhost/MGT/learnVuex/dist/index.html,一片空白。果然沒有那麼順利。開啟控制,看到Console下出現了很多錯誤。錯誤看不懂,(捂臉)只好百度了。我們一開始執行npm run build 命令
npm run build 打包後(直接打包白屏),如何執行在本地檢視效果(Apache服務)
轉載: https://www.cnblogs.com/qiu-Ann/p/7477593.html 目前,使用vue-cli腳手架寫了一個前端專案,之前一直是使用npm run dev 在8080埠上進行本地除錯。專案已經進行一半了,今天有時間突然想使用npm run build
npm run build 打包後文件不能正常訪問
目前,使用vue-cli腳手架寫了一個前端專案,之前一直是使用npm run dev 在8080埠上進行本地除錯。專案已經進行一半了,今天有時間突然想使用npm run build進行上線打包,試試能否成功看到我的專案效果。一開始是毫無頭緒,什麼都不懂,直接是就在命令列上敲下
前端框架Vue(12)——如何將 vue-cli 專案打包壓縮(npm run build)後放到伺服器
當我們將 vue 專案完成後,面臨的就是如何將專案進行打包上線,放到伺服器中。我使用的是 vue-cli(simple) 腳手架,所以就講一下如何將專案進行打包,並放到 tomcat 上。 如果是 vue-cli (非 simple 腳手架),這篇
關於vue-cli專案npm run build後,index.html無法在瀏覽器開啟
一 般打包的時候命令列會出現如下錯誤提示: 然後去dist資料夾執行index.html。在瀏覽器裡會發生如下錯誤提示: 解決的措施為: 先在config/index.js把原本是/改成./,然後再去bu
vue中npm run build打包編譯的一系列操作
從package.json 中可以看出,npm run build,其實是執行了 node build/build.js,我們在build資料夾中找到build.js,build主要的工作是:檢測node和npm版本,刪除dist包,webpack構建打包,在終端輸出構建資訊
【vue】npm run build打包路徑問題
直接插入主體 額不 主題 我的vue腳手架目錄結構如下 有個config資料夾,在index.js中有兩個方法一個開發dev,一個生產build。 dev: 是我們的開發環境,資源使用絕對路徑,所
npm run build 打包項目,圖片等資源使用相對路徑會出現路徑錯誤的問題
vue 技術 項目 npm 地方 load 路徑 錯誤 png 在build下的utils.js中,3使用 ‘vue-style-loader’ 依賴的地方添加 publicPath: ‘../../‘ , 如圖: npm run build 打包項目,圖片等資源使用相對
vue--使用vue-cli構建專案
webpack是現在較流行的前端自動化工具,該工具可以幫助開發者打包程式碼,以減少需要手動的工作,可以提高開發效率。 vue中提供了一個腳手架工具vue-cli,這個工具已經將webpack配置好了,使用這個工具可以快速地搭建一個標準專案。 一、安裝node 1.在 https://nodejs.org
使用vue-cli 構建專案
1、開啟cmd命令視窗,進入專案目錄,執行 vue init webpack myfirstvue 2、輸入命令後,會跳出幾個選項讓你回答: Project name (myfirstvue): -----專案名稱,直接回車,按照括號中預設名字(注意這裡的名字不能有大寫字母,如
vue-cli構建專案新增網站ico的logo
1.網上找一個把圖片改成ico格式的網站,把logo改成ico格式,命名favicon.ico 2.將favicon.ico放入static目錄 3.在index.html檔案中引入 <link rel="shortcut icon" type="image/x-icon" href
vue全家桶(一) 使用 vue-cli 構建專案
一.安裝node.js 進入node.js官網 https://nodejs.org/en/download/ ,選擇對應安裝包,版本建議8.0以上。 node.js安裝完了,npm也就安裝完了。 鍵盤按下【win+R】鍵,輸入cmd,然後回車,開啟cm