如何将Vue.js+Ionic构建的SPA拆分为公共与私有模块？

下面是具体的配置和代码示例，帮你把SPA拆分为公共模块（登录、找回密码）和私有模块：

1. 调整项目结构 #

先梳理目录，把公共页面和主应用代码分开：

src/
├── public-pages/          # 公共模块（无需登录即可访问）
│   ├── login/
│   │   ├── main.js        # 登录页入口文件
│   │   └── Login.vue      # 登录组件
│   └── forgot-password/
│       ├── main.js        # 找回密码页入口
│       └── ForgotPassword.vue
├── app/                   # 私有模块（需登录访问的主应用）
│   ├── main.js            # 主应用入口
│   ├── App.vue
│   ├── router/
│   │   └── index.js       # 私有路由配置
│   └── views/             # 主应用页面组件
└── templates/             # HTML模板文件
    ├── public-template.html  # 公共页面模板
    └── app-template.html     # 主应用模板

2. Webpack 核心配置修改 #

在webpack.config.js中配置多入口和多HtmlWebpackPlugin实例：

const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')

module.exports = {
  // 多入口配置：每个页面对应一个入口
  entry: {
    login: './src/public-pages/login/main.js',
    forgotPassword: './src/public-pages/forgot-password/main.js',
    app: './src/app/main.js'
  },
  output: {
    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist'),
    clean: true
  },
  // 其他loader配置（Vue、Ionic相关的babel、css loader等）...
  plugins: [
    // 生成登录页HTML
    new HtmlWebpackPlugin({
      filename: 'login.html',
      template: './src/templates/public-template.html',
      chunks: ['login'], // 只引入当前页面对应的chunk
      inject: 'body'
    }),
    // 生成找回密码页HTML
    new HtmlWebpackPlugin({
      filename: 'forgot-password.html',
      template: './src/templates/public-template.html',
      chunks: ['forgotPassword'],
      inject: 'body'
    }),
    // 生成主应用HTML
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './src/templates/app-template.html',
      chunks: ['app'],
      inject: 'body'
    })
  ]
}

3. HTML模板示例 #

公共页面模板（public-template.html） #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
  <title>公共页面</title>
  <!-- 引入Ionic样式 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css">
</head>
<body>
  <!-- 页面挂载容器 -->
  <div id="app"></div>
</body>
</html>

主应用模板（app-template.html） #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
  <title>主应用</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css">
</head>
<body>
  <div id="app"></div>
</body>
</html>

4. 入口文件示例 #

登录页入口（public-pages/login/main.js） #

import { createApp } from 'vue'
import { IonicVue } from '@ionic/vue'
import Login from './Login.vue'

// 初始化Vue应用
const app = createApp(Login)
app.use(IonicVue)
app.mount('#app')

主应用入口（app/main.js） #

import { createApp } from 'vue'
import { IonicVue } from '@ionic/vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(IonicVue)
app.use(router)
app.mount('#app')

5. 私有路由的权限控制 #

在主应用的路由配置中，添加全局守卫判断登录状态，未登录时跳转到公共登录页：

import { createRouter, createWebHistory } from '@ionic/vue-router'
import Home from '../views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  // 其他私有页面路由...
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

router.beforeEach((to, from, next) => {
  // 从localStorage或其他地方获取登录状态
  const isLoggedIn = !!localStorage.getItem('userToken')
  
  if (!isLoggedIn) {
    // 未登录跳转到登录页HTML（注意是跳转静态文件，不是SPA路由）
    window.location.href = '/login.html'
    return
  }
  next()
})

export default router

说明 #

• 构建后，dist目录会生成login.html、forgot-password.html和index.html三个独立页面，各自对应不同的入口chunk
• 公共模块无需加载主应用的代码，体积更小，加载更快
• 登录成功后，可通过window.location.href = '/index.html'跳转到主应用

内容的提问来源于stack exchange，提问作者Esteban