在Vite中配置基础URL：解决Vue3应用资源加载路径错误问题

要让Vite生成的资源（包括懒加载的视图文件）以/app/为根路径加载，只需在Vite配置中添加顶层的base配置项，指定服务器上的应用根路径即可：

• 在defineConfig的根级别添加base: '/app/'，这个配置会告诉Vite所有资源的基础URL前缀，生成的资源引用都会自动带上/app/前缀。
• 无需修改build中的rollupOptions.output路径配置，Vite会自动将base前缀应用到这些路径上。

修改后的完整配置文件如下：

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue' 

const path = require('path');

export default defineConfig({
  // 添加base配置，指定应用在服务器上的根路径
  base: '/app/',
  
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
      '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),      
    }
  }, 
  build: {
    outDir:'../wwwroot/app',
    manifest:true,
    
    rollupOptions: {
      external: [            
        '/img/icons/icons.svg',
        'bootstrap' 
      ],      
      input: { 
        cards: fileURLToPath(new URL('./src/pages/cards/cards.ts', import.meta.url)), 
      },
      output: { 
        entryFileNames: `[name].js`,
        chunkFileNames: `chunks/[name].js`,
        assetFileNames: `assets/[name].[ext]`
      }      
    },
    sourcemap: true,
    assetsDir: 'assets', 
    emptyOutDir: true,
  },  
})

补充说明 #

• base是Vite的核心配置项，作用是设置所有资源的基础路径，静态资源、懒加载代码块都会遵循这个前缀。
• 你的build.outDir设置为../wwwroot/app，刚好和服务器上的/app/路径对应，部署时直接将wwwroot/app下的文件发布到服务器即可，路径匹配不会有问题。

内容的提问来源于stack exchange，提问作者Brian