创建多页面入口
1.在根目录下创建 demo1.htm1，demo2.htm1这两个文件
2.在vite.config.js文件中配置入口
3.在src下创建文件夹和文件，src/demo1/app.vue和src/demo1/main.jsdemo1.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')遇见问题，这是你成长的机会，如果你能够解决，这就是收获。
作者：晚来南风晚相识