vue本地配置https代理

Vue2 项目启动后，很多研发人员总是遇到“此网站无法提供安全连接”的提示，尝试各种常见的代理工具， 比如Charles 和 Fiddler，也没有办法解决这个问题。

今天给大家分享一种不那么普遍但非常有效的 HTTPS 代理配置方法。

1.方法

1.1.使用mkcert生成证书

STEP1 安装Chocolatey

Chocolatey是Windows上的包管理工具，使用它可以使用命令行安装程序，使用管理员权限打开cmd，再运行如下代码，一路确认允许即可安装成功

@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"

STEP2 安装mkcert

mkcert是用来生成证书的软件，使用下列命令安装mkcert，同样要用管理员权限运行cmd

choco install  mkcert -y

STEP3 生成根证书

mkcert -install

STEP4 生成域名证书

去到指定目录，打开命令行工具

mkcert localhost xxxx.com

1.2.配置VUE项目

// webpack.config.js
const path = require('path')
module.exports = {
  // ...
  devServer: {
    publicPath: `https://localhost:${PORT}/`,
    proxy: {
      '/api': { // 代理的目标路径
        target: 'https://xxxx.com/api', // 目标服务器URL，包括协议
        secure: false, // 或者配置为true，具体取决于您的需求和后端证书情况
        changeOrigin: true, // 允许代理的请求更改其主机头以匹配目标URL
        // ...其他代理配置项（如rewrite、headers等）
        // 如果需要修改指向的话
        //pathRewrite: {
        //  '/api': ''
        //},
      },
    },
    // 如果您希望整个本地开发服务器使用HTTPS，需要配置此项
    // 配置为用mkcert生成的证书
    https: {
       key: path.resolve(__dirname, './ssl/localhost+1-key.pem'),
       cert: path.resolve(__dirname, './ssl/localhost+1.pem'),
    }, 
    // ...其他devServer配置项（如port、host等）
  },
  // 如果有指定output中publicPath的地址,则需要修改为https
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath:
      process.env.NODE_ENV === 'production'
        ? '/'
        : `https://localhost:${process.env.PORT}/`
  },
};

​​​1.3.完成

启动项目完成https配置

可以发现，请求都变成https了，并且可以正常访问相关接口和资源

作者介绍：

道一云七巧低代码开发平台，让零代码人员也能轻松构建企业级应用。通过可视化拖拽和模型驱动，实现快速开发和部署，加速企业信息化进程。利用道一云七巧低代码平台，企业可以快速实现个性化应用开发，规范流程管理，显著提升团队协作效率。作为高生产力aPaaS平台，道一云七巧是企业数字化转型的理想选择。

欢迎关注：
官网：道一云七巧 - 可视化、智能化、数字化应用构建
免费体验：道一云产品免费试用
公众号：道一云低代码（do1info）