VUE3+Vite同时build多个页面的问题。

cqwcns 发表于 2023-11-13 11:46

本帖最后由 cqwcns 于 2023-11-13 11:52 编辑

VUE3+Vite同时build多个页面的问题。
VUE3+Vite创建了一个新项目。

vite.config.js：
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：
<!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：
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')

App.vue：
<script setup>
</script>
<template>
<div>测速内容</div>
</template>
<style scoped></style>

我希望运行npm run build后，dist文件夹中能生成两个文件夹，分别是page1和page2，下带内容是根据src中的文件构建的html和js（两个独立的页面）。

这个需求应该怎样实现？请各位大佬指教，谢谢

xins666 发表于 2023-11-13 11:59

学习一下，支持楼主

我曾说过久伴她 发表于 2023-11-13 13:15

vue是spa啊，靠js动态实现页面的，不是打包出来一堆html实现的

唯一之境 发表于 2023-11-13 13:22

在defineConfig配置中再加个选项，
rollupOptions: {
   input: {
   page1: 'src/page1/index.html',
   page2: 'src/page2/index.html',
   },
},

AlanPro 发表于 2023-11-13 14:10

我正在学习

秦墨瑾 发表于 2023-11-13 14:28

服务端ssr渲染静态页面

cqwcns 发表于 2023-11-13 14:46

唯一之境发表于 2023-11-13 13:22
在defineConfig配置中再加个选项，
rollupOptions: {
input: {

靠谱，确实可以实现类似效果，但还差一点点。
如图所示，引用的js文件没有放到page文件夹中，而是放到了assests文件夹中。
所以有没有办法将所需的js文件，放到对应的page文件夹？再次谢谢大佬指教。

唯一之境 发表于 2023-11-14 13:23

本帖最后由唯一之境于 2023-11-14 13:24 编辑

cqwcns 发表于 2023-11-13 14:46
靠谱，确实可以实现类似效果，但还差一点点。
如图所示，引用的js文件没有放到page文件夹中，而是放到了 ...
当然可以，在rollupOptions下再加个配置
output: {
   dir: 'dist',
   entryFileNames: chunkInfo => `${chunkInfo.name}/.js`
   }

页: [1]

吾爱破解 - 52pojie.cn's Archiver

VUE3+Vite同时build多个页面的问题。