如何修复我的 Vue (Vite) 应用程序构建中的资产文件路径？

Question

我最近在 Vue 中完成了一个小项目，但是当我将它上传到我的服务器时，我只看到一个空白屏幕。通过研究，我发现这可能是与资产路径有关的问题，因为我将其放在子目录 (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/) 中，而不是现在的位置。

问题是，index.html 现在认为资产文件在 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/，所以无论我在哪里它都坏了。

我的项目基于 Vue.js quick start guide using vite。

My complete repo is on GitHub，这是 vite.config.js 文件：

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

感谢任何能够提供帮助的人。

Answer 1

您站点上的子目录是 /portfolio/wii/，因此您应该配置 base URL 以匹配：

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

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

如何修复我的 Vue (Vite) 应用程序构建中的资产文件路径？

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

vue.js

vite