吾爱破解 - 52pojie.cn

 找回密码
 注册[Register]

QQ登录

只需一步,快速开始

查看: 849|回复: 8
收起左侧

[求助] VUE3+Vite同时build多个页面的问题。

  [复制链接]
cqwcns 发表于 2023-11-13 11:46
本帖最后由 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(两个独立的页面)。


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

发帖前要善用论坛搜索功能,那里可能会有你要找的答案或者已经有人发布过相同内容了,请勿重复发帖。

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',
      },
    },

免费评分

参与人数 1吾爱币 +1 热心值 +1 收起 理由
cqwcns + 1 + 1 谢谢@Thanks!

查看全部评分

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文件夹?再次谢谢大佬指教。

微信图片_20231113144403.png
唯一之境 发表于 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}/[name].js`
      }

免费评分

参与人数 1吾爱币 +2 热心值 +1 收起 理由
cqwcns + 2 + 1 我很赞同!

查看全部评分

您需要登录后才可以回帖 登录 | 注册[Register]

本版积分规则

返回列表

RSS订阅|小黑屋|处罚记录|联系我们|吾爱破解 - LCG - LSG ( 京ICP备16042023号 | 京公网安备 11010502030087号 )

GMT+8, 2024-11-24 17:34

Powered by Discuz!

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表