废话只说一句:码字不易求个?,收藏 === 学会,快行动起来吧!???。
为了让前端更方便的测试打包后的文件在服务器上是否能正常显示,有必要单独弄一个 http
和 https
服务进行测试用,当然有条件的,你也可以在本地部署个 nginx
服务,都可以,多多益善,但是还是以简单方便为主。
首先进入要建立 HTTPS 服务的目录,并进入
初始化
先初始化项目,生成 package.json
文件
// 初始化项目yarn init -y// ornpm 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" }}
整个工程目录截图放这,供参考:
原文:https://juejin.cn/post/7103924807116259336