本地设置 https

有时候需要本地开发时使用https，例如后端服务使用https，前端如果仅使用http，这时会因后端设置的跨域策略(CORS)而无法正常访问后端服务

自签名证书

参考Vite官方文档, 使用@vitejs/plugin-basic-ssl插件生成自签名证书

安装插件

npm install @vitejs/plugin-basic-ssl

配置

vite.config.ts

import basicSsl from '@vitejs/plugin-basic-ssl'

export default defineConfig({
  ...
  plugins: [
    mode: 'development',
    server: {
      port: 3000,
      host: 'web-local.example.com',
      open: true,
      fs: {
        strict: true,
      },
      https: true,
    },
    basicSsl({
        name: 'web-local',
        domains: ['web-local.example.com'],
        certDir: './.certs',
      }),
  ],
})

按照上述配置，项目启动后会自动生成自签名证书到.certs目录下，并使用https协议自动打开浏览器

配置证书受信

mac环境下执行

# 先转换证书格式
openssl x509 -in .certs/_cert.pem -outform PEM -out .certs/_pem.pem
# 导入到系统证书并添加可信
sudo security add-trusted-cert -d -r trustRoot -k /Library/Keychains/System.keychain ./.certs/_pem.pem

其他方案

• vite-plugin-mkcert
• mkcert