在构建登台环境时，如何忽略vue.config.js中的devServer设置？-电脑我帮您

在构建登台环境时，如何忽略vue.config.js中的devServer设置？

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

127.0.0.1 example.test

然后，我在项目的根目录中编辑了vue.config.js，如下所示：

const fs = require('fs')

module.exports = {
  devServer: {
    host: 'example.test',
    https: {
      key: fs.readFileSync('./server.key'),
      cert: fs.readFileSync('./server.crt'),
      ca: fs.readFileSync(process.env.HOME + '/.ssh/rootCA.pem')
    }
  }
}

这在当地很有效。我的问题出在我的登台服务器上。

我的登台服务器正在运行ubuntu（16.04）并且使用certbot（LetsEncrypt）安装了一个实际的SSL证书（即非自签名）。我的项目是一个静态前端，所以我使用nginx服务它，配置为指向/dist目录并使项目在staging.example上可用。在我在上面的devServer中添加vue.config.js配置之前，这一切都运行良好。

What I expect to happen:

当我构建用于分期的项目时，即

npm run build -- --mode staging

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

What actually happens:

构建过程失败，抱怨：

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

Question: How do I get the build process to ignore the `devServer` section of `vue.config.js` when building for "staging" or "production?"

回答如下：

vue.config.js不会自动检测环境。作为it says in the Vue CLI configuration docs：

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

如何实际做到这一点并不是我立即清楚的。这是最终的工作：

const fs = require('fs')

module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV !== 'production') {
      config.devServer = {
        host: 'qzuku.test',
        // https://medium.freecodecamp/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')
        }
      }
    }
  }
}

希望这可以帮助！