在 Vue 项目中配置 HTTPS 支持需要在 Vite 中进行相应设置。以下是解决浏览器无法运行 HTTPS 的具体步骤：

1. 生成临时证书

首先需要安装@vitejs/plugin-basic-ssl插件来生成临时证书：

npm install @vitejs/plugin-basic-ssl --save-dev

2. 配置 Vite

修改vite.config.js或vite.config.ts文件，添加 HTTPS 支持：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import basicSsl from '@vitejs/plugin-basic-ssl'

export default defineConfig({
  plugins: [
    vue(),
    basicSsl() // 添加SSL插件
  ],
  server: {
    https: true, // 启用HTTPS
    port: 5173,
    host: true,
    open: true
  }
})

3. 信任临时证书（重要）

当使用临时证书启动开发服务器时，浏览器会显示安全警告。你需要手动信任该证书：
启动开发服务器：npm run dev
浏览器访问https://localhost:5173
接受安全风险并继续访问（不同浏览器操作略有不同）

4. 使用自定义证书（可选）

如果临时证书仍有问题，可以生成自定义证书：

npm install mkcert --save-dev

添加 npm 脚本到package.json：

{
  "scripts": {
    "cert": "mkcert -install && mkcert localhost 127.0.0.1 ::1",
    "dev": "vite"
  }
}

修改 Vite 配置使用自定义证书：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import fs from 'fs'

export default defineConfig({
  plugins: [vue()],
  server: {
    https: {
      key: fs.readFileSync('./localhost-key.pem'),
      cert: fs.readFileSync('./localhost.pem')
    },
    port: 5173
  }
})

5. 解决浏览器特定问题

Chrome/Firefox：如果证书错误无法解决，可以尝试启动时禁用安全检查（不推荐用于生产环境）：
bash

Chrome (Windows)

chrome.exe --ignore-certificate-errors --disable-web-security --user-data-dir=“C:/temp/chrome_temp”

Firefox

firefox --ssl-version-max=tls1.3 --setpref security.enterprise_roots.enabled=true
通过以上步骤，应该可以解决 Vue Vite 项目在浏览器中无法运行 HTTPS 的问题。如果仍然存在问题，请检查系统代理设置或防火墙是否阻止了 HTTPS 连接。