本帖最后由 cqwcns 于 2023-11-13 11:52 编辑
VUE3+Vite同时build多个页面的问题。
VUE3+Vite创建了一个新项目。
vite.config.js:
[JavaScript] 纯文本查看 复制代码 import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [
vue(),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
然后再src文件夹中创建了两个文件夹,名称分别为page1、page2。
这两个文件夹包含内容是一致的,是3个文件,分别是index.html、main.js和App.vue。
index.html:
[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="main.js"></script>
</body>
</html>
main.js:
[JavaScript] 纯文本查看 复制代码 import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
App.vue:
[HTML] 纯文本查看 复制代码 <script setup>
</script>
<template>
<div>测速内容</div>
</template>
<style scoped></style>
我希望运行npm run build后,dist文件夹中能生成两个文件夹,分别是page1和page2,下带内容是根据src中的文件构建的html和js(两个独立的页面)。
这个需求应该怎样实现?请各位大佬指教,谢谢 |