Vue与Django联动报错：Dev Server未知属性'public'的解决方法

问题原因 #

新版webpack-dev-server（Vue CLI 4+及以上版本依赖）已移除public配置项，该属性不再属于Dev Server的合法配置字段，因此触发了Schema验证错误。

修复步骤 #

直接删除vue.config.js中devServer配置链里的.public('http://0.0.0.0:8080')部分即可。原配置中的host: '0.0.0.0'已经能够实现开发服务器对外网开放访问的需求。

修正后的vue.config.js代码 #

const BundleTracker = require('webpack-bundle-tracker');

module.exports = {
  publicPath: 'http://127.0.0.1:8080/',
  outputDir: './dist/',

  chainWebpack: config => {
    config.optimization.splitChunks(false)

    config.plugin('BundleTracker').use(BundleTracker, [{filename: './webpack-stats.json'}])

    // 移除了.public()调用
    config.devServer.host('0.0.0.0').port(8080).https(false).headers({"Access-Control-Allow-Origin":["*"]})
  },

  pages: {
    index: 'src/main.js'
  }
}

额外说明 #

资源的公共访问路径由根配置中的publicPath控制，无需在devServer中重复设置。若要让同一局域网内的其他设备通过你的机器IP访问开发服务器，只需将publicPath中的127.0.0.1替换为你的实际IP地址即可。

内容的提问来源于stack exchange，提问作者BJLIM