通过多入口构建独立空白页面的Vue应用方案
在基于 Vue.js 构建的应用中，通常会将全局组件（如导航栏、页脚、侧边栏）放置于主入口文件中。然而，部分场景如登录页、广告投放页或全屏展示页，需要完全脱离这些公共组件的影响，呈现纯净的空白界面。
虽然可以通过条件渲染控制组件显示，但当存在多个此类页面时，维护成本显著上升。为此，采用多入口（Multi-Entry）架构可实现每个页面拥有独立的运行环境，彻底隔离样式与逻辑。
核心原理：多入口机制
多入口允许在一个项目中定义多个独立的 HTML 入口文件及对应的 JavaScript 入口，每个入口对应一个独立的 Vue 应用实例，拥有各自的路由、状态和样式作用域，互不干扰。
实现步骤
1. 配置构建工具
根据所使用的构建工具，配置多个入口点。
Webpack 方案（Vue CLI）
// vue.config.js
const { defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({
pages: {
main: {
entry: 'src/main.js',
template: 'public/index.html',
filename: 'index.html'
},
blank: {
entry: 'src/blank-entry.js',
template: 'public/blank.html',
filename: 'blank.html'
}
}
});Vite 方案
// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
build: {
rollupOptions: {
input: {
main: 'index.html',
blank: 'blank.html'
}
}
},
plugins: [vue()]
});2. 创建独立入口资源
空白页模板文件（public/blank.html）
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>纯空白页面</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/blank-entry.js"></script>
</body>
</html>空白页入口脚本（src/blank-entry.js）
import { createApp } from 'vue';
import BlankView from './views/BlankView.vue';
// 初始化独立应用实例
const appInstance = createApp(BlankView);
appInstance.mount('#app');空白页组件（src/views/BlankView.vue）
<template>
<div class="full-screen">
<h2>此页面无任何公共组件干扰</h2>
<p>仅包含必要内容，适用于广告落地页或全屏展示场景。</p>
</div>
</template>
<style scoped>
.full-screen {
margin: 0;
padding: 0;
height: 100vh;
background: #ffffff;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
</style>3. 路由支持（可选）
若需页面跳转功能，可在独立入口中集成路由系统。
// src/blank-router.js
import { createRouter, createWebHistory } from 'vue-router';
import BlankView from './views/BlankView.vue';
export const blankRouter = createRouter({
history: createWebHistory(),
routes: [
{ path: '/landing', component: BlankView }
]
});在入口文件中引入并使用：
import { blankRouter } from './blank-router';
const appInstance = createApp(BlankView);
appInstance.use(blankRouter);
appInstance.mount('#app');最终，访问 /blank.html 即可加载一个完全独立、无污染的空白页面，适用于高定制化需求场景。
