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

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

base:'/robotUrl/',

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


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

assetsDir:'robotAssets',

设置后dist里的文件名改变

input：指定入口文件
vite默认是index.html，当多应用有多个入口文件时，可以配置不同的html，这些html文件要在代码里
robot、main、admin是入口的名字，影响打包成的模块名字
eg:

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

在打包文件会看到

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

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

/* 整体结构 */import{fileURLToPath,URL}from'node:url'import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'importvueDevToolsfrom'vite-plugin-vue-devtools'import{resolve}from'node:path'const__dirname=fileURLToPath(newURL('.',import.meta.url))// https://vite.dev/config/exportdefaultdefineConfig({base:'/robotUrl/',plugins:[vue(),vueDevTools()],resolve:{alias:{'@':fileURLToPath(newURL('./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'),},},},})