Azure Pipeline执行npm run build失败：缺失vueapp.key文件求助

问题原因 #

构建时报错ENOENT: no such file or directory, open '/home/vsts/.aspnet/https/vueapp.key'，根源在于你的vue.config.js中，生产构建阶段依然会执行devServer的HTTPS证书读取逻辑。Azure Pipeline的构建环境中没有本地开发时生成的ASP.NET HTTPS证书文件，导致读取失败。

解决方案 #

通过区分开发/生产环境，仅在开发模式下加载devServer的HTTPS配置，生产构建时跳过这部分逻辑。修改后的vue.config.js如下：

const fs = require('fs')
const path = require('path')

module.exports = {
  // 仅在开发环境配置devServer
  ...(process.env.NODE_ENV === 'development' ? {
    devServer: {
      https: () => {
        const baseFolder =
          process.env.APPDATA !== undefined && process.env.APPDATA !== ''
            ? `${process.env.APPDATA}/ASP.NET/https`
            : `${process.env.HOME}/.aspnet/https`;

        const certificateArg = process.argv.map(arg => arg.match(/--name=(?<value>.+)/i)).filter(Boolean)[0];
        const certificateName = certificateArg ? certificateArg.groups.value : "vueapp";

        if (!certificateName) {
          console.error('Invalid certificate name. Run this script in the context of an npm/yarn script or pass --name=<<app>> explicitly.')
          process.exit(-1);
        }

        const certFilePath = path.join(baseFolder, `${certificateName}.pem`);
        const keyFilePath = path.join(baseFolder, `${certificateName}.key`);

        return {
          key: fs.readFileSync(keyFilePath),
          cert: fs.readFileSync(certFilePath),
        }
      },
      proxy: {
        '^/weatherforecast': {
          target: 'https://localhost:7020/'
        } 
      },
      port: 5002
    }
  } : {})
}

说明 #

• vue-cli-service build执行时会自动设置NODE_ENV=production，此时不会加载devServer的配置，也就不会尝试读取不存在的证书文件。
• 本地开发执行npm run serve时，NODE_ENV=development，依然会加载HTTPS配置，不影响你本地的正常开发流程。

内容的提问来源于stack exchange，提问作者matendie