react项目vite配置base地址后报错Sorry, the page you are looking for could not be found.以及nginx刷新404问题

终于找到原因了,是因为我的vite里面配置了一个proxy导致的,这个proxy原本是用来重定向api请求的,但是现在没有用了,也没有删掉,具体发生的影响原因:

在 Vite 项目中,如果你同时配置了 baseproxy,确实可能会导致 "The page you are looking for could not be found" 的问题。这是因为 baseproxy 的配置可能会相互影响,尤其是在开发环境下。

以下是可能的原因和解决方法:


1. base 配置的影响

base 配置会改变项目的根路径。例如,如果你设置了 base: '/crmi18n/',那么所有资源的路径都会以 /crmi18n/ 为前缀。

问题表现
  • 开发环境下,访问 http://localhost:3000 会报错,因为路径不匹配。
  • 你需要访问 http://localhost:3000/crmi18n 才能正确加载页面。
解决方法

确保访问开发服务器时包含 base 路径。例如:

  • 访问 http://localhost:3000/crmi18n

2. proxy 配置的影响

proxy 用于将 API 请求代理到后端服务器。如果 proxy 配置不正确,可能会导致请求无法正确代理,从而引发 404 错误。

问题表现
  • API 请求返回 404 错误。
  • 页面无法加载资源。
解决方法

确保 proxy 配置正确。例如:

javascript 复制代码
// vite.config.js
export default defineConfig({
  base: '/crmi18n/',
  server: {
    proxy: {
      '/api': {
        target: 'http://backend-server', // 后端服务器地址
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
});

3. baseproxy 的冲突

如果 baseproxy 配置不当,可能会导致路径冲突。例如:

  • base 修改了根路径,但 proxy 没有正确处理带 base 的请求。
解决方法

proxy 配置中,确保正确处理带 base 的请求。例如:

javascript 复制代码
// vite.config.js
export default defineConfig({
  base: '/crmi18n/',
  server: {
    proxy: {
      '/crmi18n/api': {
        target: 'http://backend-server', // 后端服务器地址
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/crmi18n\/api/, '/api'),
      },
    },
  },
});

4. 开发服务器的 base 支持

Vite 的开发服务器默认不会自动处理 base 路径。如果你希望在开发环境下正确处理 base,可以尝试以下方法:

修改开发服务器配置

vite.config.js 中,添加开发服务器配置:

arduino 复制代码
export default defineConfig({
  base: '/crmi18n/',
  server: {
    open: '/crmi18n/', // 自动打开包含 base 路径的 URL
  },
});

5. 完整示例

以下是一个完整的 vite.config.js 示例,包含 baseproxy 配置:

javascript 复制代码
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  base: '/crmi18n/',
  plugins: [react()],
  server: {
    open: '/crmi18n/', // 自动打开包含 base 路径的 URL
    proxy: {
      '/api': {
        target: 'http://backend-server', // 后端服务器地址
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
});

6. 检查路由配置

如果你的项目使用了前端路由(如 React Router),确保路由配置与 base 一致。

示例
javascript 复制代码
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';

function App() {
  return (
    <Router basename="/crmi18n">
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

7. 部署时的注意事项

如果你在本地开发时没有问题,但在部署后出现 404 错误,可能是以下原因:

  • 服务器未正确配置路由重定向。
  • 静态资源路径未正确处理。
解决方法
  • 确保服务器将所有请求重定向到 index.html(单页应用的路由需要支持)。

  • 如果使用 Nginx,可以添加以下配置:

    bash 复制代码
    location /crmi18n/ {
      try_files $uri $uri/ /crmi18n/index.html;
    }

总结

  1. 确保访问开发服务器时包含 base 路径(如 http://localhost:3000/crmi18n)。
  2. 检查 proxy 配置是否正确,确保代理请求能够正确处理。
  3. vite.config.js 中配置开发服务器的 open 选项,自动打开包含 base 的 URL。
  4. 确保前端路由(如 React Router)的 basenamebase 配置一致。
  5. 部署时,确保服务器正确处理 base 路径和路由重定向。

通过以上步骤,你应该可以解决 "The page you are looking for could not be found" 的问题。如果问题仍然存在,请提供更多详细信息(如 vite.config.js 配置、路由配置等),我可以进一步帮助你排查问题。

刷新404问题

nginx配置是把这个域名配置到子路径下面了:

bash 复制代码
    location /crmi18n {
        root /var/www/;
        try_files $uri $uri/ /crmi18n/index.html;
    }

这个红色线部分是非常重要的,如果不配置,就会导致刷新404问题:

然后重启nginx:

复制代码
nginx -t

sudo nginx -s reload

查看nginx日志:

bash 复制代码
tail -f /var/log/nginx/access.log
相关推荐
程序员清洒1 小时前
Flutter for OpenHarmony:Text — 文本显示与样式控制
开发语言·javascript·flutter
雨季6662 小时前
Flutter 三端应用实战:OpenHarmony 简易“动态内边距调节器”交互模式深度解析
javascript·flutter·ui·交互·dart
天人合一peng2 小时前
Unity中button 和toggle监听事件函数有无参数
前端·unity·游戏引擎
会飞的战斗鸡2 小时前
JS中的链表(含leetcode例题)
javascript·leetcode·链表
方也_arkling3 小时前
别名路径联想提示。@/统一文件路径的配置
前端·javascript
毕设源码-朱学姐3 小时前
【开题答辩全过程】以 基于web教师继续教育系统的设计与实现为例,包含答辩的问题和答案
前端
qq_177767373 小时前
React Native鸿蒙跨平台剧集管理应用实现,包含主应用组件、剧集列表、分类筛选、搜索排序等功能模块
javascript·react native·react.js·交互·harmonyos
qq_177767373 小时前
React Native鸿蒙跨平台自定义复选框组件,通过样式数组实现选中/未选中状态的样式切换,使用链式调用替代样式数组,实现状态驱动的样式变化
javascript·react native·react.js·架构·ecmascript·harmonyos·媒体
web打印社区3 小时前
web-print-pdf:突破浏览器限制,实现专业级Web静默打印
前端·javascript·vue.js·electron·html
RFCEO4 小时前
前端编程 课程十三、:CSS核心基础1:CSS选择器
前端·css·css基础选择器详细教程·css类选择器使用方法·css类选择器命名规范·css后代选择器·精准选中嵌套元素