标签：vue crt 证书 ca cert fs https path 加载

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了，感谢各位看官看到了最后，文章虽然啰嗦，但是“细”啊。

标签：vue,crt,证书,ca,cert,fs,https,path,加载
来源： https://blog.csdn.net/xfjpeter/article/details/121480873

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。