vue开启https,加载本地证书
1. 通过mkcert
创建本地证书
1.1 安装mkcert
- 安装方式:npm
- 包地址:https://www.npmjs.com/package/mkcert
- 安装命令:
npm install -g mkcert
- 判断是否安装成功,输入命令:
mkcert --version
,如果能看到版本号,说明安装成功,可以进行下一步
1.2 生成证书
- 生成一个
ca
证书,mkcert create-ca
,生成之后会看到一个ca.crt
和ca.key
文件 - 利用刚刚生成的
ca
证书,再生成cert
证书,mkcert create-cert
,会在刚刚的路径下生成cert.crt
和cert.key
文件
1.3 关键的时候来了,怎么使用
1.3.1 需要将刚刚生成的ca.crt
安装到电脑受信任的根证书中
1.3.1.1 mac
安装方式
- 双击
ca.cert
,在弹出的界面中选择刚刚的Test CA
,如下图
- 双击上图中的
Test CA
证书,出现下面的界面,选择“信任”,然后选择“始终信任”,关闭窗口,需要输入密码确认即可
1.3.1.2 window
安装方式
- 直接双击刚刚生成的
ca.crt
文件,弹出的界面中选择安装证书
- 下一步弹窗中,选择“当前用户”或“本地计算机”均可,主要是下一步,选择“将所有的证书都放入下列存储”,并且选择为“受信任的根证书颁发机构”
- 一路点击完成,最后弹出点击“是”即可,到此证书安装成功了。
1.3.2 在vue
中使用刚刚的证书
- 将刚刚生成的
cert.crt
和cert.key
两个拷贝到项目的src/ssl
文件夹中,没有可以新建一个ssl
目录 -
vue2
在vue.config.js
中写入以下关键代码
export default {
const path = require('path')
const fs = require('fs')
module.exports = {
devServer: {
open: true,
https: {
cert: fs.readFileSync(path.join(__dirname, 'src/ssl/cert.crt')),
key: fs.readFileSync(path.join(__dirname, 'src/ssl/cert.key'))
}
}
}
-
vue3
在vite.config.js
中写入以下关键代码
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'))
}
}
})
到此,证书生成安装结束了,项目跑起来就ok了,感谢各位看官看到了最后,文章虽然啰嗦,但是“细”啊。