首页 前端知识 记录Vite项目多页面应用模式踩坑

记录Vite项目多页面应用模式踩坑

2025-03-15 13:03:33 前端知识 前端哥 425 393 我要收藏

如何配置多页应用¿

vite官网-多页面应用模式
Vite Vue3 多页面开发环境路由重定向
VUE3.0+Vite 多页面应用配置
在这里插入图片描述
在这里插入图片描述

案例目录结构

在这里插入图片描述

第一个坑:环境变量undefined

如果你按照vite官方的目录结构配置的多页应用,没有改动root路径,则不会出现这个问题。如果你的root改为src/那这个envDir也是一样的,因为它默认是root。此时如果你的.env .env.production .env.development还在外面即和vite.config.js同级则不对,因为它不在root下,所以此时读取环境变量是undefined
在这里插入图片描述解决方法:把环境变量移至你指定的root

第二个坑:子页面路由刷新丢失

跳转到子页面/subPage/是正常的,刷新路由也不丢失。
跳转到子页面/subPage/list,刷新路由就会丢失,如果你配置了路由守卫,则会触发跳转/404

为什么¿

history模式就是vite开发服务器把浏览器的url当成后端路由/subPage/它能找到/subPage/index.html。所以/subPage/的主页没错。/subPage/list找不到这个资源,vite开发服务器已经内部处理好了返回/index.html。这个其实是不正确的index.html,导致路由丢失。换成hash模式是没问题的,如/subPage/#/list。浏览器不会把#后面的当作后端路由,不会去发送请求,资源由前端处理。

怎么办¿

知道原因了,就好办了。当我们发现以/subPage/开头的url找不到资源时,给它返回/subPage/index.html,这个就是子页面入口,返回这个就能找到资源。

我把前端打包放到自己写的node服务器上,验证得出:这样解决是对的。在这里插入图片描述

但是在开发环境怎么解决呢?不解决开发时就像有蚂蚁在身上爬,老鼠在咬指甲盖。当然你可以用hash模式

既然node可以解决,当然vite也可以,因为vite开发服务器就是node。但是貌似要自己写个插件,但是我不会。可以去插件社区里找,幸运的是我找到了。
vite插件社区

vite-plugin-mpa-plus
More flexible MPA (multi-page application) supports html templates, path rewriting.
翻译一下:更多扩展的多页应用,支持html模板和路径重写

这一看就是我要的啊,跟着文档试试。

import { fileURLToPath, URL } from 'node:url'
import { resolve } from 'path'
import { defineConfig } from 'vite'
import mpaPlugin from 'vite-plugin-mpa-plus'
import type { Rewrite, Pages } from 'vite-plugin-mpa-plus'
import vue from '@vitejs/plugin-vue'

const rewrites: Array<Rewrite> = [{ from: /\/subPage/, to: '/subPage/index.html' }]
const pages: any | Pages = [
  {
    entry: resolve(__dirname, './src/main.ts'),
    filename: resolve(__dirname, './src/index.html'),
    template: resolve(__dirname, './src/index.html'),
    inject: {
      data: {
        title: 'mpa'
      }
    }
  },
  {
    entry: resolve(__dirname, './src/subPage/main.ts'),
    filename: resolve(__dirname, './src/subPage/index.html'),
    template: resolve(__dirname, './src/subPage/index.html'),
    inject: {
      data: {
        title: 'mpa'
      }
    }
  }
]

// https://vitejs.dev/config/
export default defineConfig({
  root: resolve(__dirname, './src'),
  publicDir: resolve(__dirname, 'public'),
  plugins: [
    vue(),
    mpaPlugin({
      pages,
      historyApiFallback: {
        rewrites
      }
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  build: {
    outDir: resolve(__dirname, './dist'),
    emptyOutDir: true,
    rollupOptions: {
      input: {
        main: resolve(__dirname, './src/index.html'),
        sub: resolve(__dirname, './src/subPage/index.html')
      }
    }
  },
  server: {
    open: true
  }
})

这下开发环境下的多页应用history模式路由也不丢失了。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/23727.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!