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

Posted 2023-02-22

【中文标题】为暂存环境构建时如何忽略 vue.config.js 中的 devServer 设置？

【英文标题】：How to ignore devServer settings in vue.config.js when building for staging environment?

【发布时间】：2019-08-17 09:27:02

【问题描述】：

我正在使用 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.com 上提供该项目。在我在上面的vue.config.js 中添加devServer 配置之前，这一切正常。

我期望会发生什么：

当我为暂存构建项目时，即

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'

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

【参考方案1】：

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

希望这会有所帮助！

【讨论】：

也可以使用三元运算符： devServer: process.env.NODE_ENV === 'development' ? https: key: fs.readFileSync('./certs/cert.key') : undefined

这对我来说也不是很清楚。我什至浏览了文档，但没有看到您链接到的文章！谢谢！