使用vue cli3，为什么我看不到configureWebpack的变化？

Question

Vue cli入门3.我已经创建了这样的vue.config.js ......

// vue.config.js
var path = require('path');
module.exports = {
  baseUrl: process.env.NODE_ENV === 'production'
    ? '/production-sub-path/'
    : '\/mobileapp\/v\/',
  configureWebpack : {
    devServer:{
      headers: {
        'X-Custom-Foo': 'bar'
      },
      host:'notilusdev.dimosoftware.com'
    }
  }
}

我知道它正在运行，因为它获取了baseUrl属性。但无论我在configureWebpack中放什么，都没有变化。

我可以进行vue-cli-service检查，我看到我的自定义标题作为最后一个条目......

devServer: {
  headers: {
    'X-Custom-Foo': 'bar'
  },
  host: 'notilusdev.dimosoftware.com'
}

什么可能导致webpack忽略此配置？我可以放在那里只是为了测试它是否正常工作？

Answer 1

提到的warning与使用configureWebpack直接改变某些webpack选项有关。

  

警告

     

根据vue.config.js和中的值设置一些webpack选项   不应该直接变异。例如，而不是修改   output.path，你应该使用vue.config.js中的outputDir选项;   而不是修改output.publicPath，你应该使用baseUrl   vue.config.js中的选项。这是因为vue.config.js中的值   将在配置内的多个位置使用以确保一切   一起工作。

您可以直接在 vue.config.js 中使用devServer选项。使用此选项可修改与webpack-dev-server

相关的选项

// vue.config.js
var path = require("path");
module.exports = {
  baseUrl:
    process.env.NODE_ENV === "production"
      ? "/production-sub-path/"
      : "/mobileapp/v/",
  devServer: {
    headers: {
      "X-Custom-Foo": "bar"
    },
    host: "notilusdev.dimosoftware.com"
  }
};