运行 Vite 和 React-route-dom 的 Webstie 无法从正确的 URL 加载资源

Question

我有一个使用react-router-dom运行的vite应用程序。我有一个问题，如果我导航到一个页面，它会加载得很好，但是如果我将 URL 复制并粘贴到另一个窗口中，它会无法加载一些资源。

以下示例：

我在 mysite.blah 上有一个网站，我可以导航到 mysite.blah/page1 页面，一切都很好。但是，如果我将其粘贴到新的浏览器窗口中，我会遇到无法加载我的资产之一的问题。 当位置为时，它正在尝试从 mysite.blah/page1/assets/index-eufduf.js 加载资源 mysite.blah/assets/index-eufduf.js.

[电子邮件受保护] [电子邮件受保护]

我尝试将 vite.config.ts 中的基数设置为“/”，但这并没有改变任何东西。我也尝试使用 BrowserRouter 而不是 Router，但没有成功。

/// <reference types="vitest" />
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import viteTsconfigPaths from 'vite-tsconfig-paths';
import eslint from 'vite-plugin-eslint';
import EnvironmentPlugin from 'vite-plugin-environment';
import path from 'path';

export default defineConfig({
  // depending on your application, base can also be "/"
  base: '',
  plugins: [react(), viteTsconfigPaths(), eslint(), EnvironmentPlugin('all')],
  server: {
    // this ensures that the browser opens upon server start
    open: true,
    // this sets a default port to 3000
    port: 3000,
  },
  build: {
    target: 'esnext', //browsers can handle the latest ES features
  }
});

Answer 1

我遇到了一个类似的问题，通过将

base

属性设置为提供文件的生产网络服务器的完整 URL 来解决。

//vite.config.js
export default defineConfig({
    base: "https://www.production-webserver-domain.com",
    // other stuff...
});

就我而言，这个问题是由Vite处理

/dist

文件的代码拆分的方式引起的。举个例子：

• /dist/file1.js
• /dist/file2.js
• /dist/file3.js

在这种安排中，

file1.js

是唯一通过脚本标记从 HTML 调用的。其他的则使用基本 url 从

file1

动态调用，默认情况下为“/”。

当您尝试从另一个域（假设为“

domain2.com

”）加载file1时，就会出现问题。它尝试从“/”位置导入

file2

和

file3

，即 domain2.com/file2.js。

在 DevTools 控制台中看到错误就证明了这一点。