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

Question

我最近在 Vue 中完成了一个小项目，但是当我将其上传到我的服务器时，我只看到一个空白屏幕。根据我的研究，我发现这可能是与资产路径相关的问题，因为我将其放在子目录中（https://digitalspaces.dev/portfolio/wil/）。经过一段时间尝试通过编辑vite.config.js文件来修复它后，我放弃了并决定将其托管在子域（https://wil.digitalspaces.dev/）中，也就是现在的位置。

问题是， index.html 现在认为资产文件位于https://digitalspaces.dev/portfolio/wil/assets/，我想这是真的，但它们似乎无法从那里工作（也不应该他们是）。令人沮丧的是，当构建位于https://digitalspaces.dev/assets/时，资产目录是https://digitalspaces.dev/assets/，因此无论我在哪里使用它，它都会损坏。

我的项目基于使用 vite 的 Vue.js 快速入门指南。

我的完整存储库位于 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/，因此您应该配置基本 URL以匹配：

\n

// vite.config.js\nimport { defineConfig } from \'vite\'\n\nexport default defineConfig({\n  \xe2\x8b\xae\n  base: \'/portfolio/wii/\'\n})\n

\n