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

【问题标题】：How to fix the asset file path in my Vue (Vite) application build?如何修复我的 Vue (Vite) 应用程序构建中的资产文件路径？
【发布时间】：2023-01-02 05:22:21
【问题描述】：

我最近在 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/，所以无论我在哪里它都坏了。

我的项目基于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))
    }
  }
})

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

【问题讨论】：

标签： vue.js vite

【解决方案1】：

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

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

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

【讨论】：