vite2多页面配置
时间: 2023-09-01 21:05:05 浏览: 46
vite2是一个现代化的前端构建工具,它支持多页面配置,允许开发者在同一个项目中创建多个页面。
使用vite2的多页面配置需要进行以下步骤:
1. 在项目的根目录下创建一个`pages`文件夹(也可以使用其他名称)作为存放页面文件的目录。
2. 在`pages`文件夹中创建多个以`.vue`结尾的文件,每个文件代表一个页面。例如,我们可以创建一个`home.vue`和一个`about.vue`。
3. 在项目的根目录下的`vite.config.js`文件中进行配置。在`build`对象中添加一个`rollupOptions.input`属性,并将值设置为一个对象,键为各个页面名称,值为对应的页面文件路径。例如:
```javascript
export default {
// ...
build: {
rollupOptions: {
input: {
home: '/path/to/home.vue',
about: '/path/to/about.vue',
}
}
}
}
```
其中`/path/to/`需要替换为实际页面文件的路径。
4. 运行`npm run build`命令来进行项目构建。构建完成后,会在输出目录(默认为`dist`文件夹)中生成多个页面文件。
通过以上步骤配置好了vite2的多页面后,我们就可以在浏览器中访问不同的页面了。例如,可以通过`http://localhost:3000/home.html`来访问`home.vue`对应的页面。
除了上述配置外,还可以在`vite.config.js`中使用`html`插件来对每个页面进行更详细的配置,如设置模板、指定输出文件名等。具体可参考vite2官方文档。