vue3 项目使用 vite 创建独立的登录页

主要场景

有时候需要登录页、推广页等独立页面和业务 SPA 页分离的情况。尤其是在登录页中使用我觉得是不错的方案。

它可以直接和带有 vue-router、vuex、pinia 的 SPA 应用解耦，避免在登录页调用了一些 SPA 页面初始化行为。

原理

原理上其实也很简单，就是通过 Vite 的多入口、多出口来实现产出多个独立的 HTML 文件。

全程实现

创建登录页

就用最新的 vue3 脚手架为例，先创建项目：

shell 复制代码

npm create vue@latest

然后在根目录创建 login.html，其实就是复制了一份。不过如果是真实项目中可以把 index.html 中注入的各种 JS 和 CSS 清除掉。

html 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/login.js"></script>
  </body>
</html>

然后在 /src 目录下创建登录页的入口文件 login.js 和具体渲染 login.vue.

js 复制代码

import { createApp } from "vue";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import Login from "./Login.vue";

const app = createApp(Login);

// 去掉 pinia、vue-router 等不需要的库

app.use(ElementPlus);

app.mount("#app");

一个简单的 .vue 文件

html 复制代码

<template>
  <div>
    <el-input v-model="username" placeholder="请输入账号"></el-input>
    <el-input
      v-model="password"
      type="password"
      placeholder="请输入密码"
    ></el-input>
    <el-button type="primary" @click="login">登录</el-button>
  </div>
</template>

<script setup>
import { ref } from "vue";

const username = ref("");
const password = ref("");

function login() {
  window.location.href = "/"; // 登录进入 SPA 页面
}
</script>

<style scoped></style>

以上就实现了一个简单的登录页了，其中登录和登出就靠着 window.location.href 来实现

js 复制代码

function login() {
  window.location.href = "/";
}

function logout() {
  window.location.href = "/login.html";
}

另外，其实也可以在进入登录页的时候清空域名下的用户信息、实现真正的前后端登出。

js 复制代码

// login.vue

onMounted(() => {
  apiLogout()
})

Vite 配置

以上就实现了独立登录页功能，但是在执行 yarn build 的时候发现打包并没有把 login.html 包含进去。所以需要修改下 vite 的配置。

vite 的配置是基于 rollup 的，所以除了 vite 官网外，也可以参考 rollup 打包相关的配置。

js 复制代码

// vite.config.js
import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import { resolve } from 'node:path'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  build: {
    rollupOptions: {
      input: {
        index: resolve(__dirname, './index.html'), 
        login: resolve(__dirname, './login.html'),
      },
    },
  },
})

在加上了 build.rollupOptions.input 后再执行 yarn build 就可以在 dist 目录下看到 login.html 了。

这个可以让代理服务器的同学加个 Nginx 代理。

复制代码

server
{
    listen 80;
    ...
    

    location /login {
          proxy_pass http://localhost:7001/login.html;
    }
}

如此就可以通过 https://domain.com/login 来访问登录页啦~

最后

其实原理并不难，记录下此文主要是提供一种思路。面对一些独立性较强的页面的时候不用拘泥于 SPA 中的路由功能，是可以利用 vite 或者 webpack 做多页应用的。

另外，我也遇到过一开始是接入的公司公共 SSO 页，后面要自行开发登录页的情况。也适合用这种多页应用的模式。

vue3 项目使用 vite 创建独立的登录页

主要场景

原理

全程实现

创建登录页

Vite 配置

login.html 路径的隐藏

最后