如何在Quasar框架中复用Apache httpd的SSL证书

一、证书格式与处理说明 #

你的Apache使用的.crt/.key证书属于PEM格式，Quasar（基于Vite）原生支持该格式，无需转换，可直接复用。

关于证书链文件myhost.net.ca-bundle.crt：

• 不需要拆分，该文件本身就是按「用户证书→中间CA→根CA」顺序拼接的完整证书链，Vite支持直接读取这种合并后的链文件。
• 你的Apache配置已使用该文件，说明其顺序是合规的，直接复用即可。

二、Quasar.config.js配置步骤 #

在quasar.config.js的devServer字段中配置证书路径，示例如下：

const fs = require('fs')

module.exports = configure(function (ctx) {
  return {
    // 其他配置项...
    devServer: {
      https: {
        key: fs.readFileSync('/etc/pki/tls/private/ucx.key'),
        cert: fs.readFileSync('/etc/pki/tls/certs/ucx.crt'),
        ca: fs.readFileSync('/etc/pki/tls/certs/myhost.net.ca-bundle.crt')
      },
      // 热重载默认已开启，无需额外修改，确保以下字段存在即可
      hot: true,
      liveReload: true
    }
    // 其他配置项...
  }
})

注意：需在文件顶部引入fs模块，用于读取证书文件。

配置完成后仅需重启一次Quasar开发服务，后续热重载无需再次重启，浏览器会识别站点为安全状态。

三、vite.config.js生效问题说明 #

Quasar v2+基于Vite构建，但默认优先读取quasar.config.js中的配置，根目录下的vite.config.js不会自动生效，需在quasar.config.js中手动合并：

const { mergeViteConfig } = require('@quasar/app-vite')
const viteCustomConfig = require('./vite.config.js')

module.exports = configure(function (ctx) {
  return {
    // 其他配置项...
    vite: mergeViteConfig(viteCustomConfig, {
      // 可在此补充Quasar专属Vite配置
    })
    // 其他配置项...
  }
})

若vite.config.js中的特性标触发警告，说明配置项不符合当前Vite版本或Quasar兼容要求，建议将相关配置移至quasar.config.js的vite字段中合并，避免配置冲突。

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