本地项目开启https访问模式

本文链接：https://blog.csdn.net/2201_75568521/article/details/140457186

方法一：

下载安装依赖`@vitejs/plugin-basic-ssl`

npm install -D @vitejs/plugin-basic-ssl
# or
# yarn add -D @vitejs/plugin-basic-ssl
# or
# pnpm add -D @vitejs/plugin-basic-ssl

在`vite.config.js`或者`vite.config.ts`中配置

import vue from '@vitejs/plugin-vue'
// 模拟https
import basicSsl from '@vitejs/plugin-basic-ssl'

export default defineConfig({
  server: {
    open: true,
    host: '0.0.0.0',
  },
  plugins: [
    vue(),
    basicSsl(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

重启服务即可!

方法二本地模拟证书：

下载安装依赖
```
npm install -g mkcert
```
生产证书
生成一个ca证书，输入命令后会在目录下会看到一个ca.crt和ca.key文件
```
mkcert create-ca
```
生成cert证书，输入命令后会在目录下生成cert.crt和cert.key文件
```
mkcert create-cert
```
ca.crt安装到电脑受信任的根证书中
在项目中将生成的cert.crt和cert.key两个拷贝到项目的src/ssl文件夹中，没有可以新建一个ssl目录,vue3在vue.config.ts中写入以下代码即可!

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

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.join(__dirname, 'src')
    }
  },
  server: {
    open: true,
    https: {
      // 主要是下面两行的配置文件，不要忘记引入 fs 和 path 两个对象
      cert: fs.readFileSync(path.join(__dirname, 'src/ssl/cert.crt')),
      key: fs.readFileSync(path.join(__dirname, 'src/ssl/cert.key'))
    }
  }
})

如果项目启动中报错：

可以将：

替换为：

重启项目即可!