构建临时环境时如何忽略 vue.config.js 中的 devServer 设置？

Question

我正在用 Vue 构建一个应用程序。我需要https在本地环境中进行开发和测试。我按照本教程成功创建了必要的证书。为了让开发服务器使用它们，我将server.key和server.crt文件复制到我的项目的根目录中，并将文件保留rootCA.pem在~/.ssh. 我在/etc/hosts别名 localhost 中为我的域添加了一个条目，例如：

127.0.0.1 example.test

然后我vue.config.js在我的项目的根目录中编辑，看起来像：

127.0.0.1 example.test

这在本地效果很好。我的问题出在我的临时服务器上。

我的登台服务器正在运行 ubuntu (16.04) 并使用certbot(LetsEncrypt)安装了实际的 SSL 证书（即非自签名）。我的项目是一个静态前端，因此我将其nginx配置为指向/dist目录并使项目在staging.example.com. 在我devServer在vue.config.js上面添加配置之前，这一切正常。

我期望发生的事情：

当我构建用于登台的项目时，即

npm run build -- --mode staging

我希望它忽略devServer配置部分，因为NODE_ENV === 'production'（在我的.env.staging文件中设置）。

什么实际发生的情况：

构建过程失败，抱怨：

Error loading vue.config.js:
Error: ENOENT: no such file or directory, open './server.key'

问题：如何让构建过程忽略为“暂存”或“生产”构建时的devServer部分vue.config.js？

Answer 1

vue.config.js不会自动检测环境。正如Vue CLI 配置文档中所说：

如果您需要基于环境的条件行为，或者想直接改变配置，请使用一个函数（在设置 env 变量后将对其进行延迟评估）。该函数接收解析的配置作为参数。在函数内部，你可以直接改变配置，或者返回一个将被合并的对象。

如何真正做到这一点对我来说并不是很清楚。这是最终的工作：

const fs = require('fs')

module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV !== 'production') {
      config.devServer = {
        host: 'qzuku.test',
        // https://medium.freecodecamp.org/how-to-get-https-working-on-your-local-development-environment-in-5-minutes-7af615770eec
        https: {
          key: fs.readFileSync('./qzukuDevServer.key'),
          cert: fs.readFileSync('./qzukuDevServer.crt'),
          ca: fs.readFileSync(process.env.HOME + '/.ssh/rootDevCA.pem')
        }
      }
    }
  }
}

希望这可以帮助！