> For the complete documentation index, see [llms.txt](https://sugar-at.gitbook.io/blog-article/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sugar-at.gitbook.io/blog-article/vue-cli/p1.md).

# 1. vue-cli(脚手架)引入vue.config.js文件后热更新失效,每次保存都会刷新页面

## 问题起因

当我为项目引入vue.config.js文件后发现热替换就失灵了,每次保存都会刷新页面,我就感到纳闷,为什么不引入配置文件的时候就是好好的,所以**问题明显是在配置文件**上.

## 问题所在

### 当前的配置文件

```javascript
module.exports = {
    publicPath: '/',
    outputDir: 'dist',
    assetsDir: 'assets',
    configureWebpack: {
        devServer: {
            contentBase: './src',//项目基本访问目录
            host: 'localhost',//服务器ip地址
            port: 8088,//端口
            hot: true,//模块热替换
            hotOnly: true,//只有热更新不会刷新页面
        }
    },
    css: {
        // 是否使用css分离插件 ExtractTextPlugin
        //  extract: true,
        // 开启 CSS source maps?
        sourceMap: true,
        // 启用 CSS modules for all css / pre-processor files.
        modules: false
    }
}
```

经过与原来的项目进行对比,问题出在`contentBase: './src',`上

## 解决方法

将`contentBase`的目录指向当前目录即可

* 更改后的配置文件

  ```javascript
  module.exports = {
    publicPath: '/',
    outputDir: 'dist',
    assetsDir: 'assets',
    configureWebpack: {
        devServer: {
            contentBase: './',//项目基本访问目录
            host: 'localhost',//服务器ip地址
            port: 8088,//端口
            hot: true,//模块热替换
            hotOnly: true,//只有热更新不会刷新页面
        }
    },
    css: {
        // 是否使用css分离插件 ExtractTextPlugin
        //  extract: true,
        // 开启 CSS source maps?
        sourceMap: true,
        // 启用 CSS modules for all css / pre-processor files.
        modules: false
    }
  }
  ```