Vite 开启本地 https 服务

背景

有些时候项目中有 https 资源请求时会报跨域错误，因为 vite、vue-cli……等等一些构建工具都只能在本地运行 http 服务，所以需要本地开启 https 服务。

Vite 配置 vite.config.js 文件，开启 https

1. 安装依赖

// 安装 vite-plugin-mkcert
npm i vite-plugin-mkcert -D

2. 配置 vite.config.js

// 在vite.config.js里面引入vite-plugin-mkcert
import mkcert from "vite-plugin-mkcert";

export default defineConfig({
  resolve:{
    alias:{
      '@' : path.resolve(__dirname, './src')
    },
  },
  plugins: [
    mkcert(), 
    react(),
    legacy({
      targets: ['chrome >= 61'], // 针对部分低版本安卓的兼容处理
    }),
  ],
  server: {
    https: true,
  },
  // 只跟build有关 处理部分兼容
  build: {
    cssTarget: 'chrome61',
    minify: 'terser'  // 兼容安卓和ios的老内核 上下的版本控制 会降低打包速度
  },
  // 影响开发环境 部分机型dev模式下无法在真机预览 建议build后preview
  // esbuild: {
  //   target: 'chrome61',
  // }
})

引入模块后，需要向 plugins 中加入 mkcert()

配置好 vite.config.js 后，重新运行项目脚本即可。