前端——vite使用记录

1.https、ip与port配置

使用https协议，使用地址192.168.4.46，接口5173，

//1.安装basicSsl：
npm i @vitejs/plugin-basic-ssl

//2.在vite.config.js中，添加
// 开启https支持
import basicSsl from '@vitejs/plugin-basic-ssl'

export default defineConfig({
  plugins: [
    basicSsl(),
  ],
  server: {
    host: '192.168.4.46',
    port: 5173,
    open: true,
    https: true
  },
})

2.vite多页面配置

js原生项目使用vite配置多个html页面，目录结构如图所示：

需要在vite.config.js中配置：

export default defineConfig({

  // vite打包多页面配置
  build: {
    // 打包的库
    lib: {
      entry: './lib/CustomViewer.js', // 入口文件
      name: 'CustomViewer', // 全局变量名
      fileName: 'CustomViewer',// 输出文件名
      external: [''], // 外部化依赖
    },
    // 打包的项目
    rollupOptions: {
      input: {
        index: resolve(__dirname, 'index.html'), 
        demo1: resolve(__dirname, 'demo1.html'),
        demo2: resolve(__dirname, 'demo2.html'),
        demo3: resolve(__dirname, 'demo3.html'),
      }
    }
  }

})