前后台一起部署，vite配置笔记base\build

静小谢2025-12-17 18:59

场景：

当静态文件放置在后台的子包里，有很多个子包，不同子包的static里用自己单独的，前台打包默认的根路径就不行，所以需要配置base

javascript 复制代码

base: '/robotUrl/',

配置完后，打包后，启动地址和打包后的html会变成robotUrl

assetsDir

修改打包后放文件的文件名：assetsDir

javascript 复制代码

assetsDir: 'robotAssets',

设置后dist里的文件名改变

input ：指定入口文件

vite默认是index.html，当多应用有多个入口文件时，可以配置不同的html，这些html文件要在代码里

robot、main、admin是入口的名字，影响打包成的模块名字

eg:

javascript 复制代码

      input: {
        main: resolve(__dirname, 'index.html'),
        robot: resolve(__ dirname, 'robot.html'),
        admin: resolve(__dirname, 'admin.html')
      }

在打包文件会看到

设置完整，打包后如下图，modles是放在public底下的数据文件

vite.config.js文件的整体简易设置

javascript 复制代码

/*
整体结构
*/
import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
import { resolve } from 'node:path'
const __dirname = fileURLToPath(new URL('.', import.meta.url))
// https://vite.dev/config/
export default defineConfig({
  base: '/robotUrl/',
  plugins: [vue(), vueDevTools()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
  // vite 相关配置
  server: {
    port: 3333,
    host: true,
    open: false,
    proxy: {
      '/api': {
        target: 'http://xxxx.xx.xxx.xxxx:xxxx',
        changeOrigin: true,
        // rewrite: (p) => p.replace(/^\/api/, '/'),
      },
    },
  },
  build: {
    assetsDir: 'robotAssets',
    rollupOptions: {
      input: {
        robot: resolve(__dirname, 'robot.html'),
      },
    },
  },
})