vite多入口

创建多页面入口

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')
posted @ 2023-10-31 21:48  南风晚来晚相识  阅读(230)  评论(0编辑  收藏  举报