vue打包如何将单页变成多页
时间: 2023-09-10 12:05:17 浏览: 86
在使用 Vue 打包多页应用时,需要进行以下配置:
1. 在 `src` 目录下创建多个入口文件,每个入口文件都需要引入对应的 Vue 组件。
2. 在 `webpack.config.js` 中配置多个入口文件,例如:
```javascript
entry: {
page1: './src/page1/main.js',
page2: './src/page2/main.js',
},
```
3. 配置多个 HtmlWebpackPlugin 插件,每个插件对应一个入口文件。例如:
```javascript
plugins: [
new HtmlWebpackPlugin({
filename: 'page1.html',
template: './src/page1/index.html',
chunks: ['page1']
}),
new HtmlWebpackPlugin({
filename: 'page2.html',
template: './src/page2/index.html',
chunks: ['page2']
})
]
```
`filename` 表示生成的 HTML 文件名,`template` 表示 HTML 模板文件路径,`chunks` 表示该 HTML 文件需要引入哪些 JS 文件。
4. 在每个 HTML 文件中引入对应的 JS 文件,例如:
```html
<html>
<head>
<title>Page 1</title>
</head>
<body>
<div id="app"></div>
<script src="page1.js"></script>
</body>
</html>
```
`src` 属性的值为对应的 JS 文件名。
通过以上步骤,就可以将 Vue 单页应用打包成多页应用了。
阅读全文