react-ant-admin

Appearance

Return to top
On this page

路径配置

如何设置指定某地址为默认打开地址

在项目启动后，默认打开的地址是/，若要设置为其他路由地址，可以在src/router/list.tsx文件中配置defaultArr变量即可

// ./src/router/list.tsx
import { Navigate } from "react-router-dom";
const defaultArr: RouterInfo[] =  = [
  {
    [MENU_PATH]: "/", // 首页地址
    [MENU_KEY]: "index",
    components: <Navigate to="/details/person" replace />, // 跳转路由组件 去 /details/person
  },
  // .......
];
1
2
3
4
5
6
7
8
9
10
11

修改项目 base 路由前缀

找到.env-cmdrc.js文件进行如下修改即可。

const devConfig = {
  REACT_APP_ROUTERBASE: "/abc", // react路由基础路径 /abc
};
1
2
3

修改打包生产的文件夹名称

在vite.config.ts文件中配置build.outDir即可。

import { defineConfig } from 'vite'
export default defineConfig({
  build: {
    outDir: "react-ant-admin"
  },
})
1
2
3
4
5
6

静态资源目录地址

在vite.config.ts文件中配置base即可。

export default defineConfig({
  build: {
    outDir: "react-ant-admin"
  },
})
1
2
3
4
5

打包之后静态资源加载失败

因为create-react-app打包，默认把镜头资源指向 url的根路径。

  • 举例

假设你的网站地址为：https://wwww.xxxxx.com

现在你想把项目放在这个网站的二级域名下如：https://wwww.xxxxx.com/blog 但是你没有修改vite.config.ts里的base属性，所以就会发现静态文件 404。因为它们都以根目录去访问。所以会出现上述情况。

解决这种办法去修改vite.config.ts里的base属性即可

TIP

希望vite.config.ts里的base属性,与vite.config.ts文件中配置build.outDir，这两个的值相同，否则打包都会发生意想不到的事情!

React-Router 使用哈希模式(#)

只需要在.env-cmdrc.js 的启动模式下加上REACT_APP_ROUTER_ISHASH字段并且值为1即可。

{
 "REACT_APP_ROUTER_ISHASH": "1", // 启用哈希模式
}
1
2
3