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 (
    
      
        
        
      
    
  );
}

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组件中这样引用它:

Logo

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

Logo

你可能感兴趣的:(vite,react,react.js,vite)