reactjs 使用不适用于主HTML文件中静态链接的基URL响应/访问应用程序

ghg1uchk 于 2022-12-26 发布在 React

关注(0)|答案(1)|浏览(140)

我有一个关于基本网址的问题。我有一个React/Vite应用程序，它将被部署到一个托管许多其他Web属性的Web服务器中，作为其中的一部分，所有Web属性都包括共享JS和CSS。这些共享JS/CSS都是在域的根目录下提供的这些包含只是硬编码到我的主HTML文件中（通常是index.html，但在我的例子中是root.html）
我的React应用程序是从https://www.my-domain.com/apps/catalog/root.html提供服务的。如果我只使用npm run dev在本地运行我的应用程序，一切都可以正常工作-但是我的应用程序是从根目录提供服务的。我认为让这些都从基于/apps/catalog/的URL运行的正确方法是使用--base=/apps/catalog运行我所有的vite命令，这似乎几乎可以正常工作;问题是它重写了静态共享包含，这破坏了它们，因为它们被期望从根服务。
我想，我需要弄清楚如何标记特定的包含不受基本URL重写的影响？或者，有没有更好的方法来处理这个问题？
我的HTML文件w/静态包含的“共享”资产。我不想硬编码的“真实的的”域中的源网址，因为我的本地代理不能陷阱，并抓住他们的服务器端防止CORS的问题。

// /src/root.html
<html>
   <head>
      <!-- served from: https://www.my-domain.com/assets/shared.js -->
      <script src="/assets/shared.js"/> 
      <!-- served from: https://www.my-domain.com/api/shared.js -->
      <script src="/api/shared.js"/>
      .. etc ..
    </head>
    <div id="app"></div>
</html>

我在vite.config.js中开始尝试引入基本url的概念（以及一个名为“main”的非index.html文件）
本地代理，因此这些静态包括解决了CORS问题，用于本地开发（它将这些静态资产代理到共享主机，并且本地一切正常）。

// src/vite.config.js
export default defineConfig({
  plugins: [react()],
  build: {
    assetsDir: 'static-assets',
    rollupOptions: {
      input: {
        app: './root.html',
      },
    },
  },
  base: '/apps/catalog/',
  server: {
    open: '/root.html',
    proxy: {
      '^/assets/.*|^/api/.*': {
          target: 'https://www.my-domain.com',
          changeOrigin: true
      }
    }
  }
})

还有我的package.json，我试图在那里设置基本URL。

// package.json scripts
"dev": "vite --base=/apps/catalog/",
"build": "vite build --base=/apps/catalog/"

reactjs

来源：https://stackoverflow.com/questions/74117211/react-vite-app-with-base-url-that-does-not-apply-to-static-links-in-the-main-htm

1条答案

按热度按时间

67up9zun1#

我在使用Laravel 9 + vite v3.2.5时遇到了同样的问题。
我用实验性的renderBuiltUrl修复了它（几个小时后）：

import {defineConfig, loadEnv} from 'vite';
// load env variables to get base url
process.env = Object.assign(process.env, loadEnv('production', process.cwd(), ''));

export default defineConfig({
  // ...
  experimental: {
    renderBuiltUrl(filename) {
        // here we set the base url. You might have to change this for react:
        return process.env.APP_URL + '/build/' + filename;
    }
  }
}

请注意文档中的警告：
这个特性是实验性的，API可能会在未来的未成年人中更改，而不会永远遵循。请在使用它时将Vite的版本固定到未成年人。

赞(0）回复(0）举报 2022-12-26

我来回答

reactjs 使用不适用于主HTML文件中静态链接的基URL响应/访问应用程序

1条答案

相关问题

热门标签

最新问答