# 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
    }
  }
  ```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://sugar-at.gitbook.io/blog-article/vue-cli/p1.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.