vite+Vue3 createWebHistory 路由前缀配置

news2024/12/26 21:10:42

vue 作为前端最火的前端框架之一，大家在使用的过程中必不可少需要使用router(路由)。

路由有hash 和 history 两种，本期主要针对history模式下 路由前缀 使用和配置，进行简单介绍。

env变量

在根目录下，创建开发、测试、灰度、生产等 env文件

在这里插入图片描述

// .env.dev
VITE_APP_ENV = 'development'
VITE_APP_ROUTER = '/xxx-demo/'

//.env.prod
VITE_APP_ENV = 'prod'
VITE_APP_ROUTER = '/xxx-demo/'

package.json

// 使用 env 文件

{
  "name": "xxx-demo",
  "version": "1.0.0",
  "license": "MIT",
  "scripts": {
    "dev": "vite --mode dev --open",
    "build": "vite build --mode test",
    "prod": "vite build --mode prod"
  },
  "dependencies": {
  ...
  }
}

router路由文件

import { createRouter, createWebHistory } from 'vue-router'
/**
 * 去中心化管理路由
 */
const files = import.meta.globEager('./modules/*.ts')
const modules = Object.keys(files).reduce((e, path: string) => files[path]?.default, [])

const Router = createRouter({
  // VITE_APP_ROUTER  == /xxx-demo/
  // 不需要路由前缀，createWebHistory则不需要传值
  history: createWebHistory(import.meta.env.VITE_APP_ROUTER),
  routes: [...modules]
})
export default Router

路由重置、404配置

// 嵌套路由的模板组件
import Main from '@/views/layouts/mainBox.vue'

const base = [
  {
    path: '/',
    // 默认重置到/index（首页）
    redirect: '/index'
  },
  {
    path: '/page',
    component: Main,
    children:[
      {
        path: '404',
        name: 'pagge404',
        component: () => import(/* webpackChunkName: "error" */ '@/views/layouts/error.vue')
      }
    ]
  },
  {
    path: '/:pathMatch(.*)',
    // 没有匹配的path，则去404页面
    redirect: '/page/404'
  }

]

export default base

ngxin 配置

安装nginx可以参考
nginx 安装1
nginx 安装2

server
{
    listen 80;
	# 域名配置
    server_name  xxx.demo.com;
    index index.html;



    access_log  /var/log/nginx/xxx.demo.com.log main;
    error_log  /var/log/nginx/xxx.demo.com.log.err error;

    location /emao-ui {
      # 项目地址
      alias /data/www/project-xxx-demo/;
       try_files $uri $uri/ @xxx_demo;
       index index.html;
    }

    location @xxx_demoe {
       rewrite ^.*$ /xxx-demo/index.html last;
    }
}