How to cross-load assets from separate site built with Vite as you would with Webpack in an HTML file?

Question

I recently upgraded one of my projects from Vue-cli/Vue 2 over to Vue 3 and Vite for deployment. The app was deployed to an external server and works perfectly fine. However, the switch from vue-cli and webpack to vite has caused some issues.

This project is heavily reliant on Auth0 and Auth0 needs to be able to serve the page via cross-loading it from our server. Webpack worked great for this as just a very simple HTML file with some

vue.config.js from vue-cli/webpack (the comments also provide some context on what the goal here is):

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,
}

However, the app is now written as a module and Vite bundles and compiles the app differently than Webpackit. I need the app to be able to be served by Auth0, like in the html code above from the webpack/vue-cli version, but it seems I'm missing some key ideas about how Vite packages apps and module importing works. For the new Vite app, the index.html from the Vite deployment/build is below:

index.html from vite:





    
    
    
    
    My Website

Here is my 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; In theory, like with webpack, my (likely naive) thought process is that I can use the above html from the Vite build in my auth0 to cross-load the assets from my main site like I did with webpack previously but it does not seem to work like that.

One idea I've tried to do is making the href and src paths in

How to cross-load assets from separate site built with Vite as you would with Webpack in an HTML file?

Answers (1)

Related Questions