多入口解决vue-router跳转空白新页面需求-CSDN博客

本文链接：https://blog.csdn.net/kilokn/article/details/147895844

在开发 Vue.js 应用时，我们通常会在 App.vue 中放置全局公共组件（如导航栏、页脚、侧边栏等），但某些特殊页面（如登录页、广告落地页、全屏展示页）可能需要完全空白，不受这些公共组件影响。

虽然可以使用路径判断等控制公共组件的显示与否，但当有多个空白组件需求时，这就变得非常繁琐了。

我们可以使用多入口（Multi-Entry）构建独立的空白页面！

1. 什么是多入口？

多入口（Multi-Entry）是指在一个前端工程中，配置多个独立的 HTML 和 JS 入口文件，使不同页面可以拥有完全独立的 Vue 实例、路由和样式。

在运行Vue3项目时，会先行寻找入口文件（一般为main.js），在进行初始化之后挂载到App.vue上。因此，我们可以新建一个入口，从而实现完全独立的Vue实例。

2. 如何实现 Vue 多入口？

2.1 修改构建配置（Webpack/Vite）

创建项目的方式，选择两者之一即可

Webpack 配置

// 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.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.2 创建独立的空白页入口

1. 空白页 HTML (`public/blank.html`)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>空白页</title>
</head>
<body>
  <div id="blank-app"></div>
  <script src="/src/blank.js" type="module"></script>
</body>
</html>

2. 空白页 Vue 入口 (`src/blank.js`)

import { createApp } from 'vue'
import BlankPage from './views/BlankPage.vue'

// 创建完全独立的 Vue 实例
const blankApp = createApp(BlankPage)
blankApp.mount('#blank-app')

在此处是直接以BlankPage作为入口（直接显示BlankPage页面内容），你也可以选择创建一个类似App.vue的作为Vue实例

3. 空白页组件 (`src/views/BlankPage.vue`)

<template>
  <div class="blank-page">
    <h1>这是一个完全独立的空白页！</h1>
    <p>没有任何公共组件污染。</p>
  </div>
</template>

<style scoped>
.blank-page {
  background: white;
  height: 100vh;
}
</style>

2.3 配置路由（可选）

你可以直接在原路由文件中直接添加路由，也可以选择创建一个新的路由文件重新挂载。

// src/blank-router.js
import { createRouter, createWebHistory } from 'vue-router'
import BlankPage from './views/BlankPage.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/blank', component: BlankPage }
  ]
})

export default router

然后在 blank.js 中使用：

import router from './blank-router'
const blankApp = createApp(BlankPage)
blankApp.use(router)
blankApp.mount('#blank-app')