如何从使用 Vite 构建的单独站点交叉加载资源，就像在 HTML 文件中使用 Webpack 一样？

问题描述 投票：0回答：1

我最近将我的一个项目从 Vue-cli/Vue 2 升级到 Vue 3 和 Vite 进行部署。该应用程序已部署到外部服务器并且运行良好。然而，从 vue-cli 和 webpack 切换到 vite 引起了一些问题。

该项目严重依赖 Auth0，并且 Auth0 需要能够通过从我们的服务器交叉加载来提供页面服务。 Webpack 对此非常有效，因为只是一个非常简单的 HTML 文件，带有一些 

<script>
标签，为 Auth0 域上的网站提供服务。我网站上的 
index.html
与我放入 Auth0 中的 HTML 基本相同，并且效果很好，如下所示：

index.html
来自 vue-cli/webpack：

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="icon" type="image/png" sizes="32x32" href="https://my-website-domain.com/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="https://my-website-domain.com/favicon-16x16.png">
    <title>My Website</title>
    <link href="https://my-website-domain.com/js/app.js" rel="preload" as="script">
    <link href="https://my-website-domain.com/js/chunk-vendors.js" rel="preload" as="script">
</head>

<body class="font-sans antialiased"> <noscript> <strong>This site does not work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript>
    <div id="app"></div>

    <script type="text/javascript" src="https://my-website-domain.com/js/chunk-vendors.js"></script>
    <script type="text/javascript" src="https://my-website-domain.com/js/app.js"></script>
</body>

</html>
来自 vue-cli/webpack 的 

vue.config.js
（评论还提供了一些有关此处目标的背景信息）：

module.exports = {
    /*
     * This setting tells Vue to use the full URL for assets when it references them from the compiled JS.
     * This is critical for the page to work when served by Auth0's IdP on my-website.com --
     * it's cross-loading these assets from our-register, so if it's NOT using the full URL, the JS will fail
     * to load (since it doesn't exist on Auth0's server) and you'll get a white page.
     */
    publicPath: process.env.VUE_APP_PUBLIC_PATH,

    /*
     * Normally when building production, Vue will emit files with the name `app.{hash}.js`. This is a cache-
     * busting behaviour that is normally desirable. Vue automatically injects the correct names for the JS/CSS
     * into the index.html.
     * 
     * In our case, a copy of the index.html is hosted on Auth0's server as part of our config. We DO NOT update
     * this every time, so having `app.{hash}.js` instead of `app.js` will break the page when served from Auth0
     * at my-website.com. You'll get a white page and a CORB (yes, with a B) error.
     * 
     * Note that this setting ONLY changes the default behaviour of --mode=production. The subprod environments
     * default to false.
     */
    filenameHashing: false,
}

但是，应用程序现在被编写为模块，并且 Vite 捆绑和编译应用程序的方式与 Webpackit 不同。我需要应用程序能够由 Auth0 提供服务，就像上面 webpack/vue-cli 版本中的 html 代码一样，但似乎我缺少一些关于 Vite 打包应用程序和模块导入工作方式的关键想法。对于新的 Vite 应用程序，Vite 部署/构建的 

index.html
如下：

index.html
来自vite：

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <title>My Website</title>
  <script type="module" crossorigin src="/assets/index.js"></script>
  <link rel="stylesheet" crossorigin href="/assets/index.css">
</head>

<body class="font-sans antialiased">
    <noscript>
        <strong>This website does not work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>

    <div id="app"></div>
</body>

</html>

这是我的

vite.config.js
：

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import mkcert from 'vite-plugin-mkcert'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    mkcert()
  ],
  resolve: {
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
    https: true,
  },
  build: {
    rollupOptions: {
      output: {
        entryFileNames: `assets/[name].js`,
        chunkFileNames: `assets/[name].js`,
        assetFileNames: `assets/[name].[ext]`
      }
    }
  }
})

TLDR；理论上，就像使用 webpack 一样，我（可能很天真）的思考过程是，我可以使用 auth0 中的 Vite 构建中的上述 html 来交叉加载主站点中的资源，就像我之前使用 webpack 所做的那样，但似乎并不像这样工作。

我尝试过的一个想法是在新的 Vite HTML 上的 

<link>
<script>
中制作 href 和 src 路径，以使用完整的公共路径 (
https://my-website/assets/index.js
) 而不是服务器上的本地路径 (
/assets/index.js)
）因为 Auth0 服务器上不存在这些资产（因此需要交叉加载）。其一，我不知道如何让 Vite 构建 
dist
，所有这些资产都引用完整的 URL 路径。此外，当我尝试手动更改这些路径并运行简单的 html 时，这似乎不起作用，但它无法正确/到达托管站点资产，所以我相信我显然在这里遗漏了一些关于如何进行的重要内容像这样交叉加载模块。

html webpack cross-domain vite auth0
1个回答
0
投票

我在 Vite 上也遇到了类似的问题。您是否尝试过在 

vite.config.js
中设置 base 选项？

将此属性设置为生产网络服务器的完整域解决了我的问题。

// vite.config.js
export default defineConfig({
    base: "https://www.your-domain.com",
    // other config...
});
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.