如何在Vite+Vue3开发环境中结合别名正确托管静态文件？

问题核心在于开发环境下Vite的@别名指向与TS配置不匹配，同时静态资源的目录解析逻辑混乱。以下是修正后的完整配置方案，确保开发与生产环境均能正常加载静态资源：

1. 统一别名配置 #

Vite和TS的@别名必须保持一致，都指向Vue源码目录src——因为你组件中引用的@/gfx/logo.svg本质对应src/gfx/logo.svg（请确认gfx文件夹确实在src目录下）。

修改vite.config.ts的resolve.alias： #

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { fileURLToPath, URL } from 'node:url'
import { isDevelopment } from './src/utils/env' // 替换为你的环境变量判断逻辑

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      // 开发/生产环境统一指向src目录，消除路径解析冲突
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    }
  },
  base: isDevelopment ? "/" : "/dist/",
  build: {
    outDir: "wwwroot/dist/",
    rollupOptions: {
      input: "./src/main.ts",
    }
  },
  root: "./",
  publicDir: "public",
  server: {
    host: "localhost",
    port: 1000,
    strictPort: true, // 修正拼写错误：stictPort → strictPort
  }
});

保持tsconfig.json的paths配置不变： #

{
  "compilerOptions": {
    "include": ["src/shims-vue.d.ts", "src/env.d.ts", "src/**/*", "src/**/*.vue", "src/**/*.ts","src/**/*.js"],
    "baseUrl": "./",
    "paths": {
      "@/*": ["./src/*"],
    },
    "allowJs": true,
    // ...其他配置
  }
}

2. 静态资源解析逻辑说明 #

• 开发环境：Vite直接将@/gfx/logo.svg解析为src/gfx/logo.svg，通过开发服务器正常提供访问，不会出现/@fs这类异常路径前缀。
• 生产环境：构建时Vite会自动将src中的静态资源打包到wwwroot/dist/assets目录，并替换组件中的引用路径为/dist/assets/xxx.svg，与你设置的base: "/dist/"完全匹配，.NET的静态托管可以正常加载资源。

3. 额外注意事项 #

• 确认gfx文件夹位于src目录下；如果静态资源放在public目录，应直接用/gfx/logo.svg引用（无需@前缀）。
• 修正Vite配置中server.stictPort的拼写错误，避免开发服务器启动异常。

内容的提问来源于stack exchange，提问作者Martin S Ek