Vite学习笔记----多页面配置

最新推荐文章于 2024-06-24 09:38:55 发布

DIWUCH

最新推荐文章于 2024-06-24 09:38:55 发布

阅读量2.7k

点赞数

分类专栏： vite 文章标签：学习前端 vite

本文链接：https://blog.csdn.net/DIWUCH/article/details/125523708

版权

Vite 多页面配置入口配置项目构建前端开发

关键词由CSDN通过智能技术生成

vite 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

正常目录结构都按照根目录index.html展开的，但是笔者因为业务需求会有多个入口配置，所以需要用到多页面, 记录下配置过程

首先看下目录结构，如下，主要是pages页面需要配置成多入口

	├─node_modules
	├─public
	├─src
	│	├─service // API服务
	│	├─assets // 图片等静态文件
	│	│  └─imgs
	│	├─components // 全局组件
	│	├─pages // 页面
	│	│  ├─demo1
	│	│  └─demo2
	│	├─styles // 全局样式
	│	└─utils // 全局工具函数
	├─types // 全局d.ts声明
	└─vite // vite配置封装

参考官网需要配置build.rollupOptions.input：

此处需要注意以下几点

root根路径配置到src下
base项目基础路径配置成/，防止打包后js访问不对
outDir根据src的路径位置配置成相对路径就好

……
// 项目根目录
root: './src',
// 项目部署的基础路径
base: '/',
build： {
	outDir: '../dist',
	rollupOptions： {
		input: {
			/*src/index.html 这个文件只作为本地调试跳转路由的方便使用，不作为打包，所以注释掉了 */ 
			// index: resolve(__dirname, 'src/index.html'),
			demo1: resolve(__dirname, 'src/pages/demo1/index.html'),
			demo2: resolve(__dirname, 'src/pages/demo2/index.html')
		}
	}
}
 
……

可以看到src/index.html这个页面被我注释了，因为对于最后的打包来说是没意义的，只作为本地开发调试的一个指向工作，如下：

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

启动，浏览器输入http://localhost:3000，访问成功

DIWUCH

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Vite学习笔记----多页面配置

vite多页面配置可以看到这个页面被我注释了，因为对于最后的打包来说是没意义的，只作为本地开发调试的一个指向工作，如下：启动，浏览器输入http://localhost:3000，访问成功
复制链接

扫一扫

专栏目录