当前位置: 首页 > news >正文

vue、react部署项目的 hashRouter 和 historyRouter模式

Vue 项目

使用 hashRouter

如果你使用的是 hashRouter,通常不需要修改 base,因为 hashRouter 使用 URL 的哈希部分来管理路由,这部分不会被服务器处理。你只需要确保 publicPath 设置正确即可。

使用 historyRouter

如果你使用的是 historyRouter 并且将应用程序部署到非根路径(例如 /subpath),你需要在 Vue Router 配置中设置 base,并且需要在服务器配置中进行相应的调整。

修改 Vue Router 配置

src/router/index.js 中设置 base

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/views/Home.vue';Vue.use(Router);export default new Router({mode: 'history',base: '/subpath',routes: [{path: '/',name: 'home',component: Home,},// 其他路由],
});
修改 vue.config.js

确保 publicPath 设置为 /subpath

const { defineConfig } = require('@vue/cli-service');// 获取命令行参数
const args = process.argv.slice(2);
let useLocalIp = false;
args.forEach((arg) => {if (arg.includes('ip')) {useLocalIp = true;}
});module.exports = defineConfig({transpileDependencies: true,publicPath: process.env.NODE_ENV === 'production' ? '/subpath/' : '/',outputDir: 'dist',assetsDir: 'static',indexPath: 'index.html',filenameHashing: true,pages: {index: {entry: 'src/main.js',template: 'public/index.html',filename: 'index.html',title: 'My Demo',chunks: ['chunk-vendors', 'chunk-common', 'index'],},},devServer: {host: useLocalIp ? '192.167.97.207' : 'localhost',port: 8085,// https: false,proxy: null,},
});
修改 Nginx 配置

如果你使用的是 Nginx,需要在 Nginx 配置中添加对 historyRouter 的支持:

server {listen 80;server_name yourdomain.com;location /subpath/ {root /path/to/your/dist;try_files $uri $uri/ /subpath/index.html;}
}

React 项目

使用 hashRouter

如果你使用的是 hashRouter,不需要修改 base,只需要确保 homepage 设置正确即可。

修改 package.json

package.json 文件中添加 homepage 字段:

{"name": "your-app-name","version": "0.1.0","private": true,"homepage": "/subpath","dependencies": {// 你的依赖项},"scripts": {"start": "react-scripts start","build": "react-scripts build","test": "react-scripts test","eject": "react-scripts eject"}
}
使用 HashRouter

在你的 React 应用中,使用 HashRouter

import React from 'react';
import ReactDOM from 'react-dom';
import { HashRouter as Router } from 'react-router-dom';
import App from './App';ReactDOM.render(<Router><App /></Router>,document.getElementById('root')
);
使用 historyRouter

如果你使用的是 historyRouter 并且将应用程序部署到非根路径(例如 /subpath),你需要在 React Router 配置中设置 basename,并且需要在服务器配置中进行相应的调整。

修改 package.json

package.json 文件中添加 homepage 字段:

{"name": "your-app-name","version": "0.1.0","private": true,"homepage": "/subpath","dependencies": {// 你的依赖项},"scripts": {"start": "react-scripts start","build": "react-scripts build","test": "react-scripts test","eject": "react-scripts eject"}
}
使用 BrowserRouter 并设置 basename

在你的 React 应用中,使用 BrowserRouter 并设置 basename

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import App from './App';ReactDOM.render(<Router basename="/subpath"><App /></Router>,document.getElementById('root')
);
修改 Nginx 配置

如果你使用的是 Nginx,需要在 Nginx 配置中添加对 historyRouter 的支持:

server {listen 80;server_name yourdomain.com;location /subpath/ {root /path/to/your/build;try_files $uri $uri/ /subpath/index.html;}
}

通过以上步骤,你可以将 Vue 和 React 应用部署到非根路径,并确保路由正常工作。

React 默认使用的打包器是 Webpack。

使用vite

修改 vite.config.js

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';export default defineConfig({base: '/subpath/',plugins: [react()],server: {host: '0.0.0.0',port: 3000,},build: {outDir: 'dist',assetsDir: 'static',},
});
http://www.lryc.cn/news/409744.html

相关文章:

  • Qt 实现抽屉效果
  • windows上启动Kafka
  • 贪心系列专题篇三
  • Java中两个集合取差集
  • flask mysql数据迁移
  • Kylin系列(一)入门
  • pmp学习交流组队~
  • 公司常用的监控软件有哪些?2024年六大公司监控软件良心推荐!
  • DNS解析异常--排查验证
  • OpenCV库学习之Canny边缘检测模块
  • Python 教程(七):match...case 模式匹配
  • Python小项目实战:杨辉三角
  • java注解与反射(非常详细, 带有很多样例)
  • 模拟实现短信登录功能 (session 和 Redis 两种代码实例) 带前端演示
  • C# Parallel设置最大并发度
  • 【java】力扣 反转字符串中的单词
  • 科学设计程序员面试内容,破解“八股文”之弊
  • 蓝牙BlueZ验证使用记录
  • 【从0制作自己的ros导航小车:上位机篇】02、ros1多机通讯与坐标变换可视化
  • JumpServer关闭admin mfa验证
  • Kafka知识总结(选举机制+控制器+幂等性)
  • 2024非常全的接口测试面试题及参考答案-软件测试工程师没有碰到算我输!
  • python 写一个年会抽奖的demo
  • C++ OpenCV 实现多张图片叠加 叠加文字
  • 用 apifox cli 命令行运行本地接口出现TypeError:Invalid IP address: undefined
  • PyQt6简易案例代码GUI界面小工具——实现增、删、查、改(练手正合适)
  • JavaScript快速入门指南
  • Esbuild介绍
  • UnityShaderUI编辑器扩展
  • 分布式事务——2PC 代码示例