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

路由有hashhistory 两种,本期主要针对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;
    }
}

GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐