React项目中使用vite打包部署遇到的一些问题

问题一：本地运行的好好的，打包到生产环境页面显示404。

这是由于打包后的程序部署在了子目录中，导致路由和组件不匹配 所以无法正常渲染页面。

需要使用BrowserRouter组件的basename属性在react-router-dom中添加基本路径（base path）

首先，在.env.development和.env.production（如有其他环境一并添加）文件中配置VITE_PUBLIC_PATH

NODE_ENV='development'

VITE_PUBLIC_PATH = ''

-----------------------------

NODE_ENV='production'

VITE_PUBLIC_PATH = '/your-public-path/'

在使用路由的地方设置basename属性

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';

const publicPath = import.meta.env.VITE_PUBLIC_PATH;

function App() {
  return (
    <Router basename={publicPath}>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Router>
  );
}

export default App;

 需要注意的是：

当在BrowserRouter中配置了basename时，使用window.location.href进行页面跳转时，需要手动添加前缀。这是因为window.location.href不会自动应用basename。

问题二：打包后的js能正常访问，图片无法正常访问。

在vite.config.ts中设置base选项指定应用程序的公共路径。这对于部署在子目录中的应用程序尤为重要。base选项会影响以下方面：

1. 静态资源路径：设置了base，Vite会自动为静态资源（如图片、CSS文件等）添加相应的前缀。这样，可以确保在生产环境中资源路径正确。

2. 构建输出：在构建过程中，Vite会根据base选项生成正确的资源路径。这意味着，部署应用程序时，无需手动更改资源路径。

// vite.config.ts
import { defineConfig, loadEnv } from 'vite';
import reactRefresh from '@vitejs/plugin-react-refresh';

export default defineConfig(({ command, mode }) => {
  const env = loadEnv(mode, process.cwd(), '');
  return {
    base: env.VITE_PUBLIC_PATH,
    plugins: [ reactRefresh()],
  }
});

这是因为js文件经过了vite打包编译，而项目中的图片放在了public文件下，public文件夹下的内容会在构建过程中自动被复制到输出目录（默认为dist） 。

所以，在引用public文件夹下的资源时，确保在代码中使用正确的路径。例如，在public文件夹下的image文件夹中一个名为logo.png的图片，可以在React组件中这样引用它：

<img src="/image/logo.png" alt="Logo" />

如果vite.config.js中设置了base选项，请确保在资源路径中包含base值。例如：

<img src={`${publicPath}/image/logo.png`} alt="Logo" />