时间戳

首页 > 解决方案 > 为暂存环境构建时如何忽略 vue.config.js 中的 devServer 设置？

node.js - 为暂存环境构建时如何忽略 vue.config.js 中的 devServer 设置？

问题描述

我正在用 Vue 构建一个应用程序。为了开发和测试目的，我需要https在本地环境中工作。我按照本教程成功创建了必要的证书。为了让开发服务器使用它们，我将server.keyandserver.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')
    }
  }
}

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

certbot我的登台服务器正在运行 ubuntu (16.04) 并使用(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？

标签： node.jsvue.jswebpack-dev-servervue-cli

解决方案

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')
        }
      }
    }
  }
}

希望这可以帮助！

推荐阅读