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