vue本地运行使用choco启动https地址

本文档使用choco(Chocolatey )实现

1.首先安装choco:

以管理员身份打开 PowerShell：

Set-ExecutionPolicy Bypass -Scope Process -Force
[System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072
iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

第1行仅对当前会话放开脚本执行限制，不会永久修改系统策略。
第2行启用 TLS 1.2（值 3072 对应 System.Net.SecurityProtocolType 的 Tls12），确保能正常下载安装脚本与包。
第3行下载并执行官方安装脚本，完成 Chocolatey 的安装。

安装后查看是否成功：

choco -v

在安装时可能会出现：

警告: Files from a previous installation of Chocolatey were found at 'C:\ProgramData\chocolatey'.
警告: An existing Chocolatey installation was detected. Installation will not continue. This script will not overwrite
existing installations.
If there is no Chocolatey installation at 'C:\ProgramData\chocolatey', delete the folder and attempt the installation
again.

Please use choco upgrade chocolatey to handle upgrades of Chocolatey itself.
If the existing installation is not functional or a prior installation did not complete, follow these steps:
 - Backup the files at the path listed above so you can restore your previous installation if needed.
 - Remove the existing installation manually.
 - Rerun this installation script.
 - Reinstall any packages previously installed, if needed (refer to the lib folder in the backup).

Once installation is completed, the backup folder is no longer needed and can be deleted.

这个意思是：安装脚本检测到目录 C:\ProgramData\chocolatey 已存在，出于安全策略不会覆盖已有安装。请先判断是要保留现有环境还是全新安装：若要保留，请执行升级；若要重装，请先备份并按步骤彻底清理后再安装。

如果想更新可以使用：choco upgrade chocolatey -y

2.安装本地 CA 认证证书

在需要本地https的地方(我这边在项目根目录下)执行命令：

mkcert -install

因为node也会自带mkcert，并自动放到了环境变量下，所以真正要使用的时候，先找到choco除了node的安装的地方，可以使用 where mkcert 找到chocolatey的mkcert

命令执行完成后会在：C:\Users\你的用户名\AppData\Local\mkcert\ 创建rootCA.pem文件

3.生成 pem 自签证书

使用 ：mkcert dev.myvue.com localhost 127.0.0.1 ::1 192.168.xx.xx(你自己的ip)
应该会返回这个提示就是成功了：

Created a new certificate valid for the following names 
 - "dev.myvue.com"
 - "localhost"
 - "127.0.0.1"
 - "::1"
 - "192.168.xx.xx"

The certificate is at "./dev.myvue.com+4.pem" and the key at "./dev.myvue.com+4-key.pem" 

It will expire on 7 April 2028 🗓

4.本地项目配置

在vue.config.js中添加：

// vue.config.js
const fs = require('fs');
const path = require('path');

module.exports = {
  devServer: {
    host: '0.0.0.0',           // 允许局域网访问
    port: 8080, // 你自己项目的端口号
    https: {
      key: fs.readFileSync(path.resolve(__dirname, 'dev.myvue.com-key.pem')),
      cert: fs.readFileSync(path.resolve(__dirname, 'dev.myvue.com.pem'))
    },
    allowedHosts: 'all', // 允许任意 Host 头（Vue CLI 4+ / webpack-dev-server 4+）
  
  }
};

5.启动项目

然后启动项目，使用https://dev.myvue.com:8080/访问
如果访问不到，在host配置下：

127.0.0.1   dev.myvue.com
192.168.xx.xx   dev.myvue.com

6.手机端访问

如果手机端访问，需要安装并开启完全信任：
iOS：设置 → 通用 → 关于本机 → 证书信任设置 → 对该根证书开启“完全信任”。
Android：设置 → 安全/隐私与安全 → 加密与凭据 → 安装证书 → CA 证书 → 从存储选择 rootCA.pem 安装。

手机端只支持IP访问，不支持域名访问，如果实在需要域名访问，可以借助 Charles 或 Fiddler 工具
如果找不到rootCA.pem，可以使用mkcert -CAROOT命令找到，

移除证书

如果不使用该功能，可以使用下面命令卸载证书：

mkcert -uninstall

vue项目去掉https注释就行：

// vue.config.js
const fs = require('fs');
const path = require('path');

module.exports = {
  devServer: {
    host: '0.0.0.0',           // 允许局域网访问
    port: 8080, // 你自己项目的端口号
    // https: {
    //    key: fs.readFileSync(path.resolve(__dirname, 'dev.myvue.com-key.pem')),
    //    cert: fs.readFileSync(path.resolve(__dirname, 'dev.myvue.com.pem'))
    //  },
    //  allowedHosts: 'all', // 允许任意 Host 头（Vue CLI 4+ / webpack-dev-server 4+）
  }
};

手机端卸载证书

我手机是：设置->隐私与安全->安全->更多安全设置->更多安全设置->加密与凭据->用户凭据->找到证书->卸载