vite 多页面配置

segegefe

于 2022-02-21 19:13:42 发布

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端 html 面试文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/segegefe/article/details/123053729

本文介绍了在重构多页面项目时使用Vite的配置过程，包括目录结构的设定、vite.config.js的关键配置项，以及如何解决打包后JS文件路径问题。通过具体的配置示例，展示了如何设置多个入口页面，并提供了页面访问的URL。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近有多页面项目需要重构，就想试试使用vite，但是网上很多方法不太全面踩了不少的坑，
网上的多页面配置方案也不少，我只给出了我成功配置并在使用的方案

目录结构

{
	dist: // 存放打包后的文件,
	node_modules: ,
	src: {
		assets: // 一些静态文件,
		components: // 公用组件,
		index: { // 页面1
			index.html,
			main.js,
			App.vue,
			...
		},
		page: { // 页面2
			index.html,
			main.js,
			App.vue,
			...
		},
		...
		index.html // 用于页面初始进入时重定向
	},
	package.json: ,
	vite.config.js: // 配置文件
}

Tips：在src中放一个index.html是为了编译或打包后，输入localhost:3000/能够直接跳转到需要展示的页面，而不是出现文件目录或空白页面，对应代码为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vite多页面</title>
</head>
<body>
<script>
  window.location.href = 'index/index.html' // 需要重定向的页面
</script>
</body>
</html>