vite配置没有警告的server.https

背景

vue3项目在启动的时候，有时候我们要强制使用serve.https, vite项目需要一个合法的证书。

配置

方式1：

我们可以使用官方推荐的：@vitejs/plugin-basic-ssl

1. 下载 npm i @vitejs/plugin-basic-ssl -D
2. 使用

   // vite.config.js
   import basicSsl from '@vitejs/plugin-basic-ssl'
   
   export default {
    server: {
       https: true
     },
     plugins: [
       basicSsl()
     ]
   }
   

启动项目弹出一个⚠️页面，会提示不信任的证书。

方式2：

下面我们使用警告模式: vite-plugin-mkcert

1. 下载 npm i vite-plugin-mkcert -D

2. 使用

   // vite.config.js
   import {defineConfig} from'vite'
   import mkcert from 'vite-plugin-mkcert'
   
   // https://vitejs.dev/config/
   export default defineConfig({
     server: {
       https: true
     },
     plugins: [mkcert()]
   })
   

3. 配置

      export default defineConfig({
       server: {
         https: true
       },
       plugins: [mkcert({ hosts: ['shop1.com.cn', 'shop1.xxx.com']})]
     })
   

   

重新启动就会没有提示，一个安全的连接