vue怎么打出两个入口文件
时间: 2024-05-04 21:20:48 浏览: 14
在 Vue 中打包生成多个入口文件可以使用 webpack 的多入口配置。具体步骤如下:
1. 在 `src` 目录下新建多个入口文件,例如 `entry1.js` 和 `entry2.js`。
2. 在 `webpack.config.js` 中配置多个入口:
```javascript
module.exports = {
mode: 'development',
entry: {
entry1: './src/entry1.js',
entry2: './src/entry2.js',
},
//...
};
```
3. 在 `output` 中使用占位符 `[name]` 生成多个入口对应的输出文件:
```javascript
module.exports = {
//...
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
},
//...
};
```
4. 在 HTML 文件中引用生成的多个入口文件:
```html
<html>
<head>
<title>Vue Multi Entry</title>
</head>
<body>
<div id="app-1"></div>
<div id="app-2"></div>
<script src="entry1.bundle.js"></script>
<script src="entry2.bundle.js"></script>
</body>
</html>
```
这样就可以成功打包生成多个入口文件。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)