問題：
在使用vue-cli3搭建項目之后，發現修改.vue文件里面的內容之后，頁面不會自動刷新。
解決方案：
只需要在vue.config.js文件中配置一下就可以實現熱更新了，如下：
|
1
2
3
4
5
|
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熱更新
|
1
2
3
4
5
6
7
8
9
10
11
12
|
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 熱更新配置操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持服務器之家。
原文鏈接：https://blog.csdn.net/weixin_39975379/article/details/87925290
