Links

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
    }
    }
Last modified 3yr ago