news 2026/5/11 2:50:48

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

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
前后台一起部署,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'),},},},})
版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/5/10 15:28:46

深入理解 Linux 线程同步:条件变量 (Condition Variable)

各类资料学习下载合集 链接:https://pan.quark.cn/s/b0a2f36933de 在多线程编程中,互斥锁(Mutex)很好地解决了“谁能动数据”的问题(互斥),但它解决不了“什么时候动数据”的问题(同步)。 比如经典的生产者-消费者模型:消费者需要等生产者生产出数据才能消费。如果…

作者头像 李华
网站建设 2026/5/9 11:26:53

用R语言玩转RNA结构:5大必备工具包与高效编码技巧大公开

第一章:RNA结构分析的R语言入门RNA结构分析在现代生物信息学中扮演着关键角色,而R语言凭借其强大的统计计算与可视化能力,成为处理RNA数据的理想工具。通过R,研究人员能够高效解析二级结构、预测折叠模式,并对不同实验…

作者头像 李华
网站建设 2026/5/5 6:57:51

R语言采样设计实战精要,环境数据精准采集的关键路径

第一章:环境监测的 R 语言采样设计在环境科学研究中,合理的采样设计是确保数据代表性与分析有效性的关键。R 语言凭借其强大的统计计算和空间分析能力,成为构建科学采样方案的理想工具。通过整合地理信息、环境变量与随机抽样算法&#xff0c…

作者头像 李华
网站建设 2026/5/9 6:24:31

空间转录组的R语言功能富集实战(从零入门到高阶输出)

第一章:空间转录组的R语言功能富集概述 在空间转录组学研究中,功能富集分析是解析基因表达模式与生物学过程关联的核心环节。R语言凭借其强大的统计计算和可视化能力,成为该领域主流的分析工具。通过整合Seurat、SpatialDE、clusterProfiler等…

作者头像 李华
网站建设 2026/5/7 19:18:51

揭秘气候极端事件背后真相:如何用R语言完成高精度归因分析

第一章:揭秘气候极端事件背后真相:如何用R语言完成高精度归因分析在全球变暖背景下,极端气候事件频发,科学界亟需精准方法识别人类活动对气候异常的影响。R语言凭借其强大的统计建模与可视化能力,成为气候归因分析的重…

作者头像 李华
网站建设 2026/5/10 0:23:43

PyCharm的基本使用

PyCharm的使用 在安装好PyCharm后,我们就可以开始写代码啦 创建第一个python项目 打开安装好的pycharm,点击文件,选择新建项目创建好之后就是这样,根据以上方式创建的项目,我们的python所用的库都会使用**.venv**里的内…

作者头像 李华