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

问题起因

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

问题所在

当前的配置文件

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的目录指向当前目录即可

• 更改后的配置文件

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