How to fix the asset file path in my Vue (Vite) application build?-CodePudding

I recently completed a small project in Vue but when I uploaded it to my server, I am just seeing a blank screen. From research, I discovered it was likely an issue relating to the asset path as I had it in a sub-directory (https://digitalspaces.dev/portfolio/wil/). After some time trying to fix it by editing the vite.config.js file, I gave up and decided to host it in a subdomain (https://wil.digitalspaces.dev/) instead, where it is now.

The problem is, the index.html now thinks the assets files are at https://digitalspaces.dev/portfolio/wil/assets/, which is true I suppose, but they don't seem to be working from there (nor should they be). Frustratingly, when the build is in https://digitalspaces.dev/assets/, the assets directory is https://digitalspaces.dev/assets/, so it's broken no matter where I have it.

I based my project off the Vue.js quick start guide using vite.

My complete repo is on GitHub, and this is the vite.config.js file:

import { fileURLToPath, URL } from 'url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), vueJsx()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

Thanks to anyone who is able to help.

CodePudding user response：

The subdirectory on your site is /portfolio/wii/, so you should configure the base URL to match:

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  ⋮
  base: '/portfolio/wii/'
})