vue开启https,加载本地证书

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.crtca.key文件
  • 利用刚刚生成的ca证书,再生成cert证书,mkcert create-cert,会在刚刚的路径下生成cert.crtcert.key文件

1.3 关键的时候来了,怎么使用

1.3.1 需要将刚刚生成的ca.crt安装到电脑受信任的根证书中

1.3.1.1 mac安装方式
  • 双击ca.cert,在弹出的界面中选择刚刚的Test CA,如下图
    vue开启https,加载本地证书
  • 双击上图中的Test CA证书,出现下面的界面,选择“信任”,然后选择“始终信任”,关闭窗口,需要输入密码确认即可
    vue开启https,加载本地证书
1.3.1.2 window安装方式
  • 直接双击刚刚生成的ca.crt文件,弹出的界面中选择安装证书
    vue开启https,加载本地证书
  • 下一步弹窗中,选择“当前用户”或“本地计算机”均可,主要是下一步,选择“将所有的证书都放入下列存储”,并且选择为“受信任的根证书颁发机构”
    vue开启https,加载本地证书
  • 一路点击完成,最后弹出点击“是”即可,到此证书安装成功了。

1.3.2 在vue中使用刚刚的证书

  • 将刚刚生成的cert.crtcert.key两个拷贝到项目的src/ssl文件夹中,没有可以新建一个ssl目录
  • vue2vue.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'))
    }
  }
}
  • vue3vite.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了,感谢各位看官看到了最后,文章虽然啰嗦,但是“细”啊。

上一篇:SourceTree免登录


下一篇:Sourcetree 重置 Git 的账号密码