vue-cli3 熱更新配置操作
更新時間：2020年09月18日 15:01:57 作者：一只皮皮璐
這篇文章主要介紹了vue-cli3 熱更新配置操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
問題：
在使用vue-cli3搭建項目之后，發(fā)現(xiàn)修改.vue文件里面的內(nèi)容之后，頁面不會自動刷新。
解決方案：
只需要在vue.config.js文件中配置一下就可以實現(xiàn)熱更新了，如下：
chainWebpack: config => {
// 修復HMR
config.resolve.symlinks(true);
},
是的就是這么簡單。
修改一下標簽里面的內(nèi)容，ok可以自動更新。開森?。?！
好像有點開心的太早，修改css部分的內(nèi)容并沒有自動更新，原來的vue.config.js中的css配置搞的鬼。在css 的相關配置中多了extract:true的這一條配置，注釋掉之后就可以自動更新。
題外話：
vue-cli升級到3之后，減少了很多的配置文件，將所有的配置項都濃縮到了vue.config.js這個文件中，所以學懂并會用vue.config.js文件很重要，很重要，很重要。重要的句子要加粗。
補充知識：vue-cli3熱更新配置，解決熱更新失敗的問題，保存代碼瀏覽器自動刷新
在vue,config.js中配置css熱更新
const IS_PROD = ['production', 'test'].includes(process.env.NODE_ENV)
css: {
// 是否使用css分離插件 ExtractTextPlugin
extract: IS_PROD,
// 開啟 CSS source maps?
sourceMap: false,
// css預設器配置項
loaderOptions: {
},
// 啟用 CSS modules for all css / pre-processor files.
modules: false,
},
然后npm run serve 重啟項目即可
以上這篇vue-cli3 熱更新配置操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
詳解從零搭建 vue2 vue-router2 webpack3 工程
本篇文章主要介紹了詳解從零搭建 vue2 vue-router2 webpack3 工程，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要介紹了如何構(gòu)建一個Vue插件并生成npm包，幫助大家更好的理解和使用vue，方便以后的開發(fā)，感興趣的朋友可以了解下2020-10-10
在了解vue的常用的實例方法之前，我們應該先要了解其常用的實例屬性，你能了解到的vue實例屬性有哪些呢？小編在這里就列舉了幾個常用的vue實例的屬性。大家可以一起參考學習一下2022-08-08
Vue3系列之effect和ReactiveEffect?track?trigger源碼解析
這篇文章主要為大家介紹了Vue3系列之effect和ReactiveEffect?track?trigger源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
在vue中使用Echarts利用watch做動態(tài)數(shù)據(jù)渲染操作
這篇文章主要介紹了在vue中使用Echarts利用watch做動態(tài)數(shù)據(jù)渲染操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue實現(xiàn)form表單與table表格的數(shù)據(jù)關聯(lián)功能示例
這篇文章主要介紹了vue實現(xiàn)form表單與table表格的數(shù)據(jù)關聯(lián)功能,涉及vue.js表單事件響應及頁面元素屬性動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下2019-01-01
本篇文章主要介紹了詳解vue靜態(tài)資源打包中的坑與解決方案，本文主要解決路徑問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
本文主要介紹了vue結(jié)合leaflet實現(xiàn)鷹眼圖，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-06-06
這篇文章主要介紹了詳解element-ui日期時間選擇器的日期格式化問題，本文用到了DateTimePicker來選擇日期時間，但是在將數(shù)據(jù)傳回后臺的過程中遇到了一些令人頭疼的問題，有興趣的一起來了解一下2019-04-04
這篇文章主要給大家介紹了關于vue.js Router中嵌套路由的相關資料,所謂嵌套路由就是路由里面嵌套他的子路由,文章通過示例代碼介紹的非常詳細,需要的朋友可以參考下2021-06-06