vue实现2个入口
Vue 实现多入口配置
在 Vue 项目中实现多个入口通常需要修改 Webpack 配置。Vue CLI 项目可以通过 vue.config.js 文件自定义配置。
修改 vue.config.js
在项目根目录下创建或修改 vue.config.js 文件，配置多个入口点：
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
pages: {
index: {
entry: 'src/main.js',
template: 'public/index.html',
filename: 'index.html',
},
admin: {
entry: 'src/admin.js',
template: 'public/admin.html',
filename: 'admin.html',
}
}
})创建入口文件
在 src 目录下创建对应的入口文件：
main.js（默认入口）admin.js（第二个入口）
每个入口文件应包含自己的 Vue 实例初始化代码：
// admin.js
import Vue from 'vue'
import App from './AdminApp.vue'
new Vue({
render: h => h(App)
}).$mount('#admin-app')创建对应的 HTML 模板
在 public 目录下创建对应的 HTML 模板文件：
index.html（默认模板）admin.html（第二个入口模板）
每个 HTML 文件应有自己的挂载点：
<!-- admin.html -->
<div id="admin-app"></div>构建和运行
运行项目时，可以通过不同 URL 访问各个入口：
/index.html访问主入口/admin.html访问管理入口
开发环境配置
开发环境下需要配置 devServer 支持多入口：
module.exports = {
devServer: {
historyApiFallback: {
rewrites: [
{ from: /^\/admin/, to: '/admin.html' },
{ from: /^\/index/, to: '/index.html' }
]
}
}
}生产环境构建
构建后会生成对应的多个 HTML 文件和打包资源：
dist/
├── index.html
├── admin.html
├── js/
│ ├── index.[hash].js
│ └── admin.[hash].js
└── css/
├── index.[hash].css
└── admin.[hash].css路由配置注意事项
如果使用 Vue Router，需要为每个入口配置独立的路由实例，避免路由冲突。可以在各自的入口文件中初始化路由。
