vite+vue3构建多页应用

最新推荐文章于 2024-05-24 14:16:00 发布

失眠时间

最新推荐文章于 2024-05-24 14:16:00 发布

阅读量1.5k

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weiCong_Ling/article/details/133907428

版权

文章目录

前言
一、构建基础项目模板
二、新建多页目录及配置

前言

一般情况下，单页路由配置可支持大部分情况。
由于领导需要把两个不同项目合并统一入口进入，且登录共用，这个时候需考虑配置多页结构开发啦。
以下简单介绍多页配置等相关内容

一、构建基础项目模板

参考vite+vue3+ts项目构建详细步骤（配置多语言版本）

二、新建多页目录及配置

注意页面目录名称、路由前缀、api接口前缀不要出现一致情况，放置Nginx配置匹配出现问题

在page目录下分别新建a.html,b.html文件，文件内容如下：
在这里插入图片描述

a.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>A 页面</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/product/a/main.ts"></script>
  </body>
</html>

b.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>B 页面</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/product/b/main.ts"></script>
  </body>
</html>

在product目录下分别新建a,b目录，把src目录下的所有文件复制到a,b目录下，并分别修改a,b目录下路由配置；加上对应前缀;修改history配置(区分本地开发和线上，本地无nginx配置情况下需使用hash模式才能访问多页面)
路由修改如下：
a目录路由：

import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: import.meta.env.DEV ? createWebHashHistory() : createWebHistory(),
  routes: [
    {
      path: '/product1/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/product1/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('../views/AboutView.vue')
    }
  ]
})

export default router

b目录路由

import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: import.meta.env.DEV ? createWebHashHistory() : createWebHistory(),
  routes: [
    {
      path: '/product2/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/product2/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('../views/AboutView.vue')
    }
  ]
})

export default router

由于a,b目录下路由路径已修改，所以在对应的App.vue文件均需修改路由跳转，如下
在这里插入图片描述

按上述配置后，编译项目可访问
http://localhost:5173/page/a.html#/product1/

在这里插入图片描述

http://localhost:5173/page/b.html#/product2/

在这里插入图片描述

3.线上访问配置

这里先介绍Nginx配置情况，部分配置可参考 Nginx配置中的接口代理转发

A.打包构建多页配置

由于是多页项目，所以项目构建打包的时候需要在vite.config.ts文件配置构建多页路径

import path from 'node:path'

export default defineConfig({
  ...
  build: {
    chunkSizeWarningLimit: 1500,
    rollupOptions: {
      input: {
        a: path.resolve(__dirname, 'page/a.html'),
        b:path.resolve(__dirname,'page/b.html')
      },
      // 静态资源分类打包
      output: {
        // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
        globals: {},
        chunkFileNames: 'assets/js/[name]-[hash].js',
        entryFileNames: 'assets/js/[name]-[hash].js',
        assetFileNames: 'assets/[ext]/[name]-[hash].[ext]',
        manualChunks(id) { // 静态资源分拆打包
          if (id.includes('node_modules')) {
            return id.toString().split('node_modules/')[1].split('/')[0].toString();
          }
        }
      }
    }
  }

配置完执行npm run build,构建项目如下
在这里插入图片描述

B.Nginx代理路由配置

由于上面路由配置区分了本地开发（hash）和线上（history）两种
需要使用代理配置线上路由才能正常访问 /product1和 /product2，具体如下：

    server {
        listen       8000;
        server_name  localhost;

        location / {
            root   product;
            index  index.html index.htm;
        }
        location /product1 {
            root   product;
            try_files $uri $uri/ @product1;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
            index index.html index.htm;
            gzip_static on;
        }
        location /product2 {
            root   product;
            try_files $uri $uri/ @product2;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
            index index.html index.htm;
            gzip_static on;
        }
        #对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
        #因此需要rewrite到index.html中，然后交给路由在处理请求资源
        location @product1 {
            rewrite ^.*$ /page/a.html last;
        }

        location @product2 {
            rewrite ^.*$ /page/b.html last;
        }
    }