vue怎么打出两个入口文件
时间: 2024-05-12 18:13:50 浏览: 15
在 Vue 中,可以使用多个入口文件来构建不同的应用程序。以下是一个简单的示例:
首先,在项目的 webpack 配置文件中,需要添加多个入口文件,如下所示:
```js
module.exports = {
entry: {
app1: './src/main1.js',
app2: './src/main2.js'
},
// ...
}
```
这里我们定义了两个入口文件:`src/main1.js` 和 `src/main2.js`。它们将分别打包为两个应用程序。
然后,需要在 HTML 文件中添加两个不同的 `<script>` 标签,指向不同的入口文件,如下所示:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue Multiple Entry Points</title>
</head>
<body>
<div id="app1"></div>
<div id="app2"></div>
<script src="/dist/app1.bundle.js"></script>
<script src="/dist/app2.bundle.js"></script>
</body>
</html>
```
这里我们为每个应用程序都创建了一个占位符 `div`,然后通过不同的 `<script>` 标签分别加载不同的入口文件。
最后,运行 `npm run build` 命令来打包应用程序。Webpack 将会根据配置文件中定义的入口文件打包出多个应用程序,分别保存为不同的文件(例如 `app1.bundle.js` 和 `app2.bundle.js`)。
这样就可以使用多个入口文件打包多个应用程序了。