vite打包vue，多页面应用和多入口配置
如果你是像我一样使用electron(或其他的框架)开发多窗口的应用时，这也极大的节省了你打开一些页面的速度，因为对于electron来说每个窗口都是一个独立打开的浏览器标签页面。你需要一个需要独立出来介绍页面，公司简介，其他的页面也需要，这个时候你不必把整个项目都在家，就可以用到这个多页面的应用配置。好了以上就是我配置的多入口以及多页面应用的全部介绍，其实打包的配置还是蛮多的，如果大家想继续深入
vite打包vue，多页面应用和多入口配置
vite打包中的配置
这个配置提供了一些便捷，我在做electron开发的时候，涉及到很多窗口单独打开。
按照我以往的设计模式应该是建立路由跳转到对应的模块页面。
但是这涉及到一个问题，vue项目由于包很大初始加载的时候会很慢。
这对于窗口只打开一小部分内同的页面来说是多余的，影响了用户体验。
因此，我查阅了vite原理，vite打包是根据入口文件的依赖关系来的。
可以这么说如果你入口文件中引用了一些插件，就会被打包，若没有引入则不会被打包。
下面图片对比，图1没有插件，图片2引入了antd库,最终图2的文件大小1.5，比图1大了一个库的大小
上面介绍了你不必担心下面的配置会给你的项目增加负担，反而减少了你很多困扰。
多页面应用
这个功能，我设想了一部分场景例如：
你需要一个需要独立出来介绍页面，公司简介，其他的页面也需要，这个时候你不必把整个项目都在家，就可以用到这个多页面的应用配置。
如果你是像我一样使用electron(或其他的框架)开发多窗口的应用时，这也极大的节省了你打开一些页面的速度，因为对于electron来说每个窗口都是一个独立打开的浏览器标签页面。都需要重新加载。
下面是vite官方文档构建生产版本时，一些介绍，其中多页面应用配置
多入口配置
这里需要重点说一下啊，官方并没有这项配置，但是这是一个我觉得非常实用的操作。
简单说一下就是，多入口我这里指的是一个项目多种配置，一款产品针对不同的用户的操作界面转换。
前提是你的项目核心模块，是固定的。这样将会节省你维护代码的事件。
index.html 我们的主入口文件，默认我们网站时找这个文件。
我将在这里设置我们引入 main.ts 的路径
<!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 in %MODE% %VITE_API_URL%</title>
</head>
<body>
<div id="app"></div>
<!-- 【变量】VITE_ENTRY 打包入口路径 -->
<script type="module" src="/src/%VITE_ENTRY%/main.ts"></script>
</body>
</html>
VITE_ENTRY 如果有经验的小伙伴应该会知道，这个变量时配置在 .env.* 文件中的
这个是 index.html 引用 main.ts 的路径设置
// .env.test
VITE_ENTRY = 'entry/test' // 这是index.html 引用的最终路径
当然我会在 路径 src/entry/test 下还有放一个main.ts
main.ts 此时则会根据需要，添加自定义的依赖和组件了
import { createApp } from 'vue'
import App from './AppTest.vue'
const app = createApp(App)
app.mount('#app')
这时我们只需要在打包时启用这个环境变量即可
最后我在packjson中打包时启用了 test 环境变量
"build:test": "run-p type-check && vite build --mode test",
好了以上就是我配置的多入口以及多页面应用的全部介绍，其实打包的配置还是蛮多的，如果大家想继续深入了解请看下面的链接地址吧
vite官网 https://cn.vitejs.dev/
Rollup官网 https://cn.rollupjs.org/
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)