Aurelia应用开发环境配置HTTPS访问的实现方法求助

前置准备：生成自签名SSL证书 #

开发环境无需申请CA颁发的商用证书，直接生成本地自签名证书即可：

• 本地安装openssl工具后，在项目根目录执行命令生成证书和私钥文件：
  openssl req -x509 -newkey rsa:2048 -keyout localhost.key -out localhost.crt -days 365 -nodes
• 执行命令后按照提示填写信息（所有字段都可留空直接回车确认），会在当前目录生成localhost.key（私钥文件）和localhost.crt（证书文件），你可以把这两个文件统一放到项目根目录的ssl文件夹下方便管理。
• 生成后将localhost.crt导入本地系统的「受信任的根证书颁发机构」存储区，避免浏览器访问时弹出安全警告。

不同构建工具的HTTPS配置方案 #

你可以根据自己项目使用的构建工具选择对应配置：

方案1：使用Aurelia CLI 内置开发服务器 #

打开项目根目录下的aurelia_project/aurelia.json文件，找到devServer配置节点，修改为以下内容：

"devServer": {
  "port": 8080,
  "https": true,
  "key": "./ssl/localhost.key",
  "cert": "./ssl/localhost.crt",
  // 保留原有其他devServer配置即可
}

配置完成后重启au run命令，即可通过https://localhost:8080访问应用。 #

方案2：使用Webpack作为构建工具 #

打开项目根目录下的webpack开发环境配置文件（通常为webpack.config.js或webpack.dev.js），修改devServer配置项：

1. 首先在配置文件顶部引入依赖：

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

2. 调整devServer配置：

module.exports = {
  // 其他原有配置保留
  devServer: {
    https: {
      key: fs.readFileSync(path.resolve(__dirname, './ssl/localhost.key')),
      cert: fs.readFileSync(path.resolve(__dirname, './ssl/localhost.crt')),
    },
    port: 8080,
    // 保留原有其他devServer配置即可
  }
}

配置完成后重启开发服务即可使用HTTPS访问。 #

方案3：使用Vite作为构建工具 #

打开项目根目录下的vite.config.js文件，添加server相关配置：

import { defineConfig } from 'vite';
export default defineConfig({
  // 其他原有配置保留
  server: {
    https: {
      key: './ssl/localhost.key',
      cert: './ssl/localhost.crt'
    },
    port: 5173
  }
})

配置完成后重启npm run dev命令即可。 #

注意事项 #

如果你的应用代码中存在硬编码的HTTP接口地址、静态资源地址，需要统一修改为HTTPS地址，或者使用协议相对路径（格式为//域名/资源路径），否则浏览器会触发混合内容拦截规则，阻止对应资源加载。 #

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