問題：

在使用vue-cli3搭建專案之後，發現修改.vue檔案裡面的內容之後，頁面不會自動重新整理。

解決方案：

只需要在vue.config.js檔案中配置一下就可以實現熱更新了，如下：

chainWebpack: config => {
 // 修復HMR
 config.resolve.symlinks(true);
 
},

是的就是這麼簡單。

修改一下標籤裡面的內容，ok可以自動更新。開森！！！

好像有點開心的太早，修改css部分的內容並沒有自動更新，原來的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 熱更新配置操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。