vue devtools 以及熱更新


devtools

谷歌vue開發調試工具,devtools,在開發環境可以使用,在生產環境提示:Devtools inspection is not avaliable,becase it is in prodction mode;

Vue.config.devtools 配置是否允許vue-devtools檢查代碼,開發版本默認是true,生產版本默認是false,如果需要在生產環境下也可以使用vue-devtools,需要

設置Vue.config.devtools=true,務必在加載vue之后,立即同步設置

 

在開發環境中會出現這樣的log:

[HMR] Waiting for update signal from WDS...

來自WDS的提示,正在更新

1 webpack是什么:

webpack是一個自動化構建工具,解決前端開發者除了業務開發外的雜事,比如:打包、語言的轉換、熱更新、啟動本地服務器等等。

與本問題有關的webpack配置是它為我們搭建的本地服務器以及熱更新功能。

2 [HRM]是什么:

它是Hot Module Replacement的簡寫。模塊熱更新

3 [WDS] 是什么:

它是Webpack dev Server的簡寫。webpack的開發環境服務器(本地服務器)。所以WDS開頭的信息提示由webpack-dev-server本地服務器產生,

在啟動本地服務時

 

 運行npm run dev命令時候執行的腳本文件:一個時webpack-dev-server另一個時build/webpack.dev.conf.js

 

 生產環境取消所有的日志信息以及debugger信息:

在build/webpack.prod.conf.js文件下plugins添加webpack.optimize.UglifyJsPlugin

 


免責聲明!

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



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