若依启动项目时配置为 HTTPS 协议

文章目录

• 1、需求提出
• 2、应用场景
• 3、解决思路
• 4、注意事项
• 5、完整代码
• • 第一步：修改 vue.config.js 文件
  • 第二步：运行项目
  • 第三步：处理浏览器警告
• 6、运行结果

1、需求提出

在开发本地项目时，默认启动使用的是 HTTP 协议。但在某些测试或安全性要求较高的场景中，需要项目使用 HTTPS 协议来模拟线上环境的安全连接。如何快速配置项目以支持 HTTPS 协议呢？本文将为您提供解决方案。

2、应用场景

• 测试环境：测试需要 HTTPS 协议以验证安全性。
• 第三方接口调试：某些 API 接口仅支持 HTTPS 请求。
• 模拟线上环境：在本地模拟与生产环境一致的协议类型，方便开发调试。

3、解决思路

通过修改项目的 vue.config.js 配置文件中的 devServer 选项，开启 HTTPS 支持。这一配置可以确保开发环境下以 HTTPS 协议运行，满足测试或接口调试需求。

4、注意事项

• 证书问题：默认情况下，使用的 HTTPS 是自签名证书，浏览器可能会提示安全警告。
• 接口跨域：确保后端接口同样支持 HTTPS，避免跨域或协议不匹配问题。
• 生产环境差异：开发环境中的 HTTPS 配置仅用于调试，生产环境需要通过真实证书配置服务器。

5、完整代码

第一步：修改 vue.config.js 文件

在项目根目录下找到 vue.config.js 文件，添加或修改 devServer 配置，将 https 设置为 true。

以下是修改后的代码：

module.exports = {
  // 其它配置
  devServer: {
    https: true, // 启用 HTTPS 协议
    // 其他配置项
  },
};

第二步：运行项目

保存配置后，启动项目时，浏览器会自动以 HTTPS 协议访问项目。

第三步：处理浏览器警告

由于本地使用的是自签名证书，浏览器可能会提示"此连接不安全"的警告。这是正常现象，点击"高级"并选择"继续访问"即可。如果需要避免警告，可以配置一个受信任的本地证书。

6、运行结果

启动项目后，浏览器地址栏将显示 https://localhost:8080（默认端口），并以 HTTPS 协议访问项目。尽管可能会提示自签名证书警告，但功能调试不受影响，满足测试需求。

通过以上配置，您可以轻松在本地项目中启用 HTTPS 协议，为开发测试提供更多便利！