vue项目本地开启https协议访问（vite）

在现代前端开发中，使用 HTTPS 协议进行安全与加密的数据传输已经成为一种标准做法。对于使用 Vite 创建的 Vue 项目，如果希望在本地开发过程中使用 HTTPS 协议，可以通过以下几个步骤轻松实现。

1. 安装 Node.js 和 Vite

确保你的开发环境中已安装 Node.js。然后你可以使用 npm（或 yarn）来创建新项目：

npm create vite@latest my-vue-app --template vue
cd my-vue-app
npm install

2. 生成本地自签名证书

在本地开发环境中，你可以使用 OpenSSL 来生成自签名证书。首先，安装 OpenSSL（如果尚未安装）。对于 Windows 用户，可以使用 Win32 OpenSSL，而在 macOS 和 Linux 上，可以直接通过包管理工具安装。

下面是生成证书的步骤：

1. 打开终端。
2. 创建一个目录来存放证书文件：

bash mkdir certs cd certs

1. 生成私钥：

bash openssl genrsa -out private.key 2048

1. 生成证书请求：

bash openssl req -new -key private.key -out server.csr

按照提示输入信息，注意 Common Name 字段要输入为 localhost。

1. 生成自签名证书：

bash openssl x509 -req -days 365 -in server.csr -signkey private.key -out certificate.crt

这样，你的 certs 目录下就会生成 private.key 和 certificate.crt 两个文件。

3. 修改 Vite 配置文件

在你的 Vue 项目的根目录下找到 vite.config.js 文件，进行如下修改以启用 HTTPS：

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    https: {
      key: fs.readFileSync(join(__dirname, 'certs/private.key')),
      cert: fs.readFileSync(join(__dirname, 'certs/certificate.crt')),
    },
    // 如果需要，可以设置端口
    port: 3000,
  }
})

这里通过 Node.js 的 fs 模块读取生成的证书文件，并在 server 配置中指定 HTTPS 设置。

4. 启动开发服务器

完成配置后，你可以启动 Vite 开发服务器。在终端中运行以下命令：

npm run dev

打开浏览器并访问 https://localhost:3000，你可能会看到一个安全警告，说明证书不是由受信任的证书机构签发的。这是因为我们使用的是自签名证书。在这种情况下，你可以选择继续访问（通常有个选项可以添加例外）。

5. 配置浏览器信任自签名证书（可选）

为了避免每次访问时的安全警告，你可以将自签名证书添加到你的操作系统或浏览器的受信任根证书列表中。具体步骤因操作系统和浏览器而异，但通常是在浏览器设置或操作系统证书管理中进行。

总结

通过以上几个步骤，你就可以在本地开发环境中为 Vite Vue 项目启用 HTTPS。使用 HTTPS 能够增强你应用的安全性，特别是在处理敏感数据时。这对于现代网页应用开发至关重要，也是提升用户信任感的有效方式。希望这篇文章能够帮助你顺利开启本地的 HTTPS 访问！