vue3 本地开发开启 https

1、安装mkcert证书创建器

npm i mkcert -g

2、检验是否安装成功

mkcert --version

有版本好出现则成功

3、创建证书颁发机构

mkcert create-ca

会在当前目录生成,ca.crt 和 ca.key 两个文件

4、创建证书

mkcert create-cert

会在当前目录生成,cert.crt 和 cert.key 两个文件 

5、将生成的ca.crt安装到Windows电脑

6、在vue3 中 vite.config.js 使用

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import fs from "fs";
import path from "path";

export default defineConfig({
  plugins: [vue()],
  server: {
    https: {
      cert: fs.readFileSync(path.join(__dirname, "src/ssl/cert.crt")),
      key: fs.readFileSync(path.join(__dirname, "src/ssl/cert.key")),
    },
  },
});

 7、完结

<think>好的,用户想在Vue项目中配置本地开发环境以支持HTTPS模式。我需要根据提供的引用内容来解答这个问题。首先,引用[1]中提到在Vue脚手架3.x项目中,可以通过在vue.config.js文件的devServer配置中添加https: true来启用HTTPS。这应该是主要的步骤。不过,可能还需要生成自签名证书,但用户可能没有提到这一点,所以是否需要补充说明呢? 接下来,我需要确认用户使用的Vue CLI版本。引用[3]提到了Vue CLI v5.0.8,而引用[5]是关于使用pnpm创建Vue3项目的。可能用户的项目结构不同,但配置方法类似。不过,用户的问题主要集中在启用HTTPS,所以主要参考引用[1]的内容。 另外,用户可能需要知道如何生成本地SSL证书,因为仅仅设置https: true可能会导致浏览器警告。这时候可能需要使用devServer的https选项来指定证书路径,比如: devServer: { https: { key: fs.readFileSync(&#39;path/to/key.pem&#39;), cert: fs.readFileSync(&#39;path/to/cert.pem&#39;), } } 但用户可能没有现成的证书,所以可能需要指导他们如何生成。不过,在引用中没有提到这部分,所以是否需要建议他们使用mkcert或者其他工具生成? 根据引用[1],最简单的配置就是设置https: true,这时候Vue CLI会自动生成自签名证书。可能用户只需要按照这个步骤就可以,但实际中可能会遇到浏览器不信任的情况,这时候可能需要手动信任证书或者提供更详细的步骤。 此外,需要确保用户正确修改vue.config.js文件,如果项目中没有这个文件,可能需要创建它。同时,修改后需要重启开发服务器才能生效。 最后,生成相关问题需要考虑用户可能遇到的后续问题,比如如何处理证书错误、如何配置代理与HTTPS共存,或者如何在不同环境中切换配置等。</think>### 如何在 Vue 项目中启用本地 HTTPS 开发模式 #### 配置步骤 1. **修改 `vue.config.js` 文件** 在项目根目录下创建或修改 `vue.config.js` 文件,添加 `devServer` 配置段并启用 HTTPS: ```javascript module.exports = { devServer: { // 启用 HTTPS https: true } } ``` 保存后重启开发服务器,访问地址将变为 `https://localhost:8080`(具体端口可能因项目而异)[^1]。 2. **处理浏览器安全警告** 启用 HTTPS 后,浏览器可能提示证书不受信任。此时可通过以下方式解决: - **临时忽略警告**:直接点击浏览器提示中的「继续前往」 - **生成可信证书**(推荐): 使用工具如 `mkcert` 生成本地可信证书,然后在配置中指定证书路径: ```javascript const fs = require(&#39;fs&#39;) module.exports = { devServer: { https: { key: fs.readFileSync(&#39;path/to/localhost-key.pem&#39;), cert: fs.readFileSync(&#39;path/to/localhost.pem&#39;) } } } ``` 3. **结合代理配置** 若项目中存在 API 代理配置,HTTPS 可与代理共存: ```javascript module.exports = { devServer: { https: true, proxy: { &#39;/api&#39;: { target: &#39;http://your-backend.com&#39;, changeOrigin: true, pathRewrite: { &#39;^/api&#39;: &#39;&#39; } } } } } ``` 这种配置下,本地开发服务器与后端接口均可安全通信[^2]。 #### 验证配置 - 运行 `pnpm serve` 或 `npm run serve` - 控制台应显示 `HTTPS: true` 提示 - 浏览器地址栏显示 🔒 图标即表示成功 #### 常见问题 1. **证书无效警告** 自签名证书需要手动信任,或使用 `mkcert` 生成受系统信任的证书 2. **端口冲突** 检查 `vue.config.js` 中是否已通过 `port` 字段指定唯一端口
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

xl__qd

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值