vuecli5配置多页面
时间: 2024-01-01 14:05:08 浏览: 30
要在Vue CLI 5中配置多页面应用程序,您需要执行以下步骤:
1. 在src目录中创建一个新的文件夹,例如pages。
2. 在pages文件夹中创建一个新的文件夹,用于每个页面的名称。例如,如果您有一个名为home的页面,则可以在pages文件夹中创建一个名为home的文件夹。
3. 在每个页面文件夹中创建一个名为index.js的文件,该文件将是每个页面的入口点。
4. 在vue.config.js文件中添加以下代码:
```javascript
module.exports = {
pages: {
home: {
entry: 'src/pages/home/index.js',
template: 'public/index.html',
filename: 'home.html'
},
about: {
entry: 'src/pages/about/index.js',
template: 'public/index.html',
filename: 'about.html'
}
}
}
```
这将告诉Vue CLI创建两个页面:home和about。每个页面都有自己的入口点(在src/pages/home/index.js和src/pages/about/index.js中)和生成的HTML文件的名称(home.html和about.html)。
5. 在每个页面文件夹中创建一个名为index.html的文件,用于该页面的模板。您可以使用与public/index.html文件相同的内容,也可以根据需要进行自定义。
6. 运行npm run serve命令以启动开发服务器,或运行npm run build命令以打包应用程序。
这些步骤将帮助您在Vue CLI 5中配置多页面应用程序。