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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.