持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第4天，点击查看活动详情
废话只说一句：码字不易求个👍，收藏 === 学会,快行动起来吧！🙇🙇🙇。
为了让前端更方便的测试打包后的文件在服务器上是否能正常显示，有必要单独弄一个 http 和 https 服务进行测试用，当然有条件的，你也可以在本地部署个 nginx 服务，都可以，多多益善，但是还是以简单方便为主。
首先进入要建立 HTTPS 服务的目录，并进入
初始化
先初始化项目，生成 package.json 文件
// 初始化项目
yarn init -y
// or
npm init -y
安装服务
先安装 http-server 服务
yarn add http-server
生成证书
// 生成证书 命令 ①
openssl genrsa -out key.pem 1024
此时当前文件夹内会生成 key.pem
// 生成证书 命令 ②
openssl req -new -key key.pem -out csr.pem
执行命令按照提示填写下地址和邮箱信息，这个怎么写就随意了，也许可以一路回车下去呢！
此时当前文件夹内会生成 csr.pem
// 生成证书 命令 ③
openssl x509 -req -in csr.pem -signkey key.pem -out cert.pem
此时当前文件夹内会生成 cert.pem
PS：这种没有经过机构验证证书浏览器会有提示信任了就好
配置服务
证书生成完毕后，配置启动 http 和 https 服务的命令,打开 package.json 文件，添加如下命令：
"scripts": {
"http": "http-server dist",
"https": "http-server -S dist"
}
其中 dist 文件夹是为了存放服务文件用的，比如可以将 vue 打包好的文件放到这个目录里，将这个目录名定义为 dist，也是为了方便测试 vue 打包后的项目。这样就可以将 vue 打包后的文件直接复制到根目录即可。
完工
完整的 package.json 文件内容如下：
{
"name": "server",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"dev": "http-server dist",
"https": "http-server -S dist"
},
"dependencies": {
"http-server": "^14.1.0"
}
}
整个工程目录截图放这，供参考：
