本地启动打包后文件

原创已于 2023-01-31 11:22:58 修改 · 380 阅读

CC 4.0 BY-SA版权

文章标签：

于 2023-01-31 11:21:57 首次发布

6 篇文章

订阅专栏

2 篇文章

订阅专栏

本文介绍如何在VSCode中使用LiveServer插件快速启动本地服务器，并配置其使用HTTPS协议，包括证书的创建与安装步骤。

在 vs code 扩展中安装 Live Server

VS Code setting.json 中配置 Vue/React 打包后文件夹 build/dist 为服务器的根目录
"liveServer.settings.root": "/dist",
本地服务器设置 https 协议（不需要可以跳过这步）
全局安装mkcert 用于创建 CA 证书和 TLS 证书
npm install mkcert -g
创建 CA 证书
mkcert create-ca 得到 ca.key / ca.crt 文件
创建 TLS 证书
mkcert create-cert 得到 cert.key / cert.crt 文件
安装 CA 证书
Mac 安装步骤
Win 安装步骤
配置 VS Code setting.json
```
"liveServer.settings.https": {
    "enable": true,
     "cert": "../cert.crt", // 全路径 或者 相对路径
	 "key": "../cert.key",  // /Users/glbian/Documents/cx-customer-portal/ca.key
    "passphrase": ""
},
```
启动服务
找到 dist 目录下的 index.html，鼠标右键，选择 Open with Live Server
就可以以dist目录为根路径，index.html 为页面入口启动本地服务器