前言

多页面其实可以理解为多个独立的业务之间共享部分代码逻辑的实现。业务之间是相对独立的，只是小部分或者大部分的代码是可以共用的，常见的一个场景就是：改头换面形式的换肤。

不同的皮肤之间毫无可复用组件代码的情况下，我们只能将通用的业务逻辑抽离成可复用的部分，简单点来说就是将数据与ui分离，数据是共用部分，ui是各自独立。

最终衍生出的多页面结构大体如下：

pages
├── pageA
│   ├── App.vue
│   ├── index.html
│   ├── main.ts
└── pageB
    ├── App.vue
    ├── index.html
    └── main.ts

那么我们使用vite该如何实现这样的特性呢，下面开始一步步实践它！

此处内容已隐藏回复后方可阅读。

分类： vue 项目实战 标签： vue3多页面vite多入口
版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿站点。未经许可，禁止转载。

评论

全部评论 33

  1. 666
    666
    Google Chrome MacOS
    666真不错啊
    回复
  2. 666
    666
    Google Chrome Windows 10
    [打call]
    回复
  3. 123
    123
    Google Chrome Windows 10
    求借鉴啊啊啊啊啊啊
    回复
  4. fsdf
    fsdf
    Google Chrome MacOS
    xsdfsdf撒地方撒旦法
    回复
  5. 112
    112
    Google Chrome MacOS
    学习1111111
    回复
  6. 1
    1
    Google Chrome Windows 10
    休息一下111
    回复
  7. 1
    1
    Google Chrome Windows 10
    来学习一下
    回复
  8. Casey
    Casey
    Google Chrome Windows 10
    来康康
    回复
  9. 5234
    5234
    Google Chrome Windows 10
    学习一下学习一下
    回复
  10. 12
    12
    Google Chrome MacOS
    怎么弄啊？？啊啊啊
    回复
  1. 1
  2. 2
  3. 3
  4. 4

相关推荐

Vue 3 进阶实战：基于 Promise 的通用弹窗管理器（命令式调用）

木灵鱼儿 96 0 0
promise dialog vue3

搭建基于 Vite + TypeScript + Vue 3 + Electron的小项目

木灵鱼儿 454 25 0
vue3 vite Electron

plugin-legacy 动态读取 .browserslistrc配置

木灵鱼儿 1630 0 0
postcss vite @vitejs/plugin-legacy

vite中正确使用unplugin-auto-import实现自动引入vue相关依赖（支持Eslint v9）

木灵鱼儿 14818 317 2
自动引入 eslint ts

Vite 代码降级完全指南：从build.target到自动化 Polyfill

木灵鱼儿 2629 2 1
babel vite 兼容

vue3中使用shiki实现代码高亮和注意事项

木灵鱼儿 7403 106 0
代码高亮 异步 vue3

搭建一个vite+vue+ts的Chrome插件开发模板

木灵鱼儿 21234 34 47
插件 模板 vue3

vite+vue3和nuxt3实现低版本浏览器兼容的解决方案（白屏问题）

木灵鱼儿 117911 70 149
vue3 vite 兼容

vite5 打包体积分析（对标webpack包体分析）

木灵鱼儿 5653 146 0
vite 包体分析

vite+vue3 代替require()的hooks

木灵鱼儿 2988 20 0
vue3 vite hooks
获得点赞 26
文章被阅读 14,195
最后更新 23-10-26 9:42:08

目录

目录