使用 vue cli3，为什么我看不到我的 configureWebpack 更改? [英] With vue cli3, why can't I see my configureWebpack changes?

问题描述

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

Getting started with Vue cli 3. I've created a vue.config.js like this...

// 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 中放入什么，都没有任何变化.

I know it's working because the baseUrl property is picked up. But no matter what I put in configureWebpack, nothing changes.

我可以执行 vue-cli-service 检查，并且我看到我的自定义标头是最后一个条目...

I can do a vue-cli-service inspect, and I see my custom header as the last entry...

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

什么可能导致 webpack 忽略这个配置?我可以在那里放什么来测试它是否有效?

What might cause webpack to ignore this config? What can I put in there just to test that it's even working?

推荐答案

有一个 警告 提到与使用 configureWebpack 直接改变一些 webpack 选项相关.

There is a warning mentioned related to mutating some webpack options directly using configureWebpack.

警告

一些 webpack 选项是基于 vue.config.js 和不应直接变异.例如，而不是修改output.path，你应该使用 vue.config.js 中的 outputDir 选项；而不是修改 output.publicPath，你应该使用 baseUrlvue.config.js 中的选项.这是因为 vue.config.js 中的值将在配置内的多个地方使用以确保一切一起正常工作.

Some webpack options are set based on values in vue.config.js and should not be mutated directly. For example, instead of modifying output.path, you should use the outputDir option in vue.config.js; instead of modifying output.publicPath, you should use the baseUrl option in vue.config.js. This is because the values in vue.config.js will be used in multiple places inside the config to ensure everything works properly together.

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

There is a devServer option present you can use directly in vue.config.js. Use this option to modify options related to 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"
  }
};

这篇关于使用 vue cli3，为什么我看不到我的 configureWebpack 更改?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！