vite多入口-526互联

创建多页面入口

1.在根目录下创建 demo1.htm1，demo2.htm1这两个文件
2.在vite.config.js文件中配置入口
3.在src下创建文件夹和文件，src/demo1/app.vue和src/demo1/main.js

demo1.htm1

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- 引入入口文件 -->
    <script type="module" src="/src/page/demo1/main.js"></script>
  </body>
</html>

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import {resolve} from 'path'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  // 构建多入口
  build: {
    rollupOptions: {
      input: {
        index: resolve(__dirname, 'index.html'),
        demo1: resolve(__dirname, 'demo1.html'),
        demo2: resolve(__dirname, 'demo2.html')
      }
    }
  }
})

src/demo1/main.js

import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')