vue3 项目本地启动如何为 https 模式

Vue3 项目要在本地运行并启用HTTPS模式，通常需要通过反向代理配置来模拟HTTPS环境。因为浏览器默认不允许通过HTTP访问HTTPS页面，所以你需要设置一个本地服务器作为“代理”来处理HTTPS请求。

以下是使用`vue-cli`脚手架的一个常见做法：

1. 安装 `vue-devtools` 和 `http-proxy-middleware`：

   npm install -D @vue/cli-plugin-devtools http-proxy-middleware

2. 打开 `vue.config.js` 文件（如果不存在，可以手动创建），然后添加以下内容：

   module.exports = {
     // ...其他配置...
     devServer: {
       port: 8080, // 选择一个端口，这里是8080
       https: true,
       proxy: {
         '/api': { // 代理路径前缀
           target: 'https://your-backend-url.com', // 替换为你的实际API地址
           ws: true, // 如果你的API支持WebSocket，记得开启
           secure: false, // 开启HTTPS，但这里仅用于本地调试，不必担心证书错误
         },
       },
       headers: {
         'Access-Control-Allow-Origin': '*', // 允许跨域请求
       },
     },
   };

3. 运行项目：

   vue serve

现在，你可以访问 `https://localhost:8080` 来查看项目，所有的API请求都会被转发到指定的HTTPS地址。请注意，这只是一个临时解决方案，正式生产环境中应获取真实的SSL证书，并部署到HTTPS服务器上。