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 @   南风晚来晚相识  阅读(696)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
点击右上角即可分享
微信分享提示