在 HTTPS 中运行 Visual Studio 默认 Vue 项目

Question

我使用默认的 Vue 项目模板在 Visual Studio 2019 中创建了一个标准 Vue 应用程序。我使用的是 Windows 10。这将创建一个可以使用 Vue CLI 启动的简单项目。该站点仅以 HTTP 运行，导致我正在调试的其他仅接受 HTTPS 的项目出现问题。

我的问题：如何强制我的 Vue 网站以 HTTPS 运行？

Answer 1

在 Visual Studio 中，右键单击包含 Vue 应用程序的项目并选择属性。将“--https”添加到“脚本参数”中，位于“serve”后面。确保在“serve”和“--https”之间留有空格。

您的连接很可能不安全，因为 SSL 证书无法识别。您可以使用 mkcert 创建有效的 HTTPS 证书。要使用它，请键入以下命令：

1. 安装 Chocolatey，一个包管理器：

Set-ExecutionPolicy Bypass -Scope Process -Force; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

2. 安装mkcert：

choco install mkcert

3. 为 mkcert 创建受信任的 CA，以便其证书受信任：

mkcert -install

4. 为本地主机创建证书：

mkcert localhost

重新启动计算机，启动解决方案，完成。

Answer 2

我也遇到过类似的问题，并找到了针对各个项目量身定制的解决方案。

在你的 vue 项目中，你可以使用 vue.config.js

设置你的项目

devServer: {
    https: true,
    proxy: {}
}

然后，您可以再次 npm run dev 并以 HTTPS 方式运行该项目。