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',
},
});