vite+Vue3 createWebHistory 路由前缀配置
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
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;
}
}
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 个月前
更多推荐
已为社区贡献7条内容
所有评论(0)