vite+vue项目开启https
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
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
中写入以下关键代码
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了,感谢各位看官看到了最后,文章虽然啰嗦,但是“细”啊。
GitHub 加速计划 / vu / vue
207.53 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:1 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 3 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 4 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)