vue3+vite 如何修改打包后的文件夹名称

最新推荐文章于 2025-03-20 15:44:55 发布

web老张头

最新推荐文章于 2025-03-20 15:44:55 发布

阅读量7.7k

点赞数 2

文章标签： java javascript python

本文链接：https://blog.csdn.net/sinat_36194710/article/details/131400992

版权

在Vite配置文件vite.config.js中，可以通过设置`build.outDir`来改变输出目录（dist）的名称，以及使用`build.assetsDir`来修改静态资源文件夹（static）的名称，以此实现对构建结果的定制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

正常打包后都会生成一个dist文件夹，下面有一个static文件夹和一个index.html文件

现在我想要修改dist文件夹和static文件夹的名字，代码如下：

//vite.config.js
 build: {
    outDir: '文件名',//想要把dist修改成什么名字在这边改
    assetsDir:'文件名'//想要把static修改成什么名字在这边改
  }

具体如图：

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

web老张头

关注关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vue3+vite - 打包编译后页面白屏、CORS跨域、加载js/html文件失败、图片不显示、音视频不显示问题，解决打包生成index.html页面显示空白、找不到资源、报资源跨域打不开报错问题！

高级前端工程师

05-30

1万+

vue3，vite，build，打包编译，vite打包后页面白屏，index.html，dist，跨域，CORS报错，图片不显示，资源js加载出错，部署服务器后打开，页面空白，网页不显示，浏览器控制台，全是报错，vite+vue3执行build打包后index.html无法打开怎么办，打不开咋办，啥也不显示，index.html打开空白，打开cors跨域怎么解决，网页上线后一刷新就报错，上线后，typescript，ts，404-Page Not Found，vite build后访问报错，Vite+Vue

vue3+vite+npm组件的封装与发布

lululu_的博客

05-26

2183

vue3+vite+npm封装vue3组件，发布npm组件，npm发布过程中的问题

参与评论您还未登录，请先登录后发表或查看评论

【Vite】修改构建后的 index.html 文件名

Superman_H的博客

07-10

1930

在 Vite 项目中，默认构建 `index.html` 。但有时候我们需要修改 `index.html` 为其他文件名，比如 `index-{时间戳}.html` 。我们可以这样配置 vite.config.js： ```js import { defineConfig } from 'vite'; import type { PluginOption } from 'vite'; // 自定义插件 type RenameHtmlPlugin = () => PluginOption; cons

vite+vue3项目若依框架前端如何修改打包后的dist文件名称包名方法教程

weixin_66071584的博客

12-05

738

记录一下vite+vue3项目若依框架前端如何修改打包后的dist文件名称包名方法教程。很简单，打开vite.config.js。

Vue 项目打包后路径问题的解决方法

最新发布

有我更精彩的博客

03-20

893

Vue 项目打包后路径问题通常由静态资源路径错误、路由路径错误、环境变量路径错误或publicPath配置错误引起。通过正确配置静态资源路径、Vue Router 的base选项、环境变量、publicPath配置以及使用相关插件，可以有效解决这些问题。希望本文的介绍能帮助你在 Vue 开发中更好地处理打包后的路径问题，确保项目在生产环境中的正常运行。最后问候亲爱的朋友们，并邀请你们阅读我的全新著作📚《Vue.js 3企业级项目开发实战（微课视频版》

vite设置文件夹别名

weixin_55555471的博客

03-06

2924

简化路径：通过使用别名，开发者可以用简短的名称代替复杂的相对路径或绝对路径，从而使代码更加简洁和易于理解。避免路径嵌套：在大型项目中，文件和目录可能会嵌套很多层，使用别名可以避免在代码中编写冗长的路径，减少路径引用错误的可能性。统一路径规范：通过定义统一的别名，整个项目可以遵循一致的路径规范，使得代码更加一致和可维护。支持重构：如果项目中的目录结构发生变化，只需要更新别名配置，而不需要修改大量的代码引用。提高开发效率：使用别名可以减少在编辑器中手动输入和查找路径的时间，加快开发速度。

vue修改默认打包dist文件名称

weixin_62321221的博客

03-18

1602

如果修改后不生效，那么找到config文件夹下的index.js文件，修改build中的两个属性，修改成你想要的名称。修改vue.config.js文件中的outputDir，改成你想要的名称。

Vite之根据不同的打包配置文件对打包文件夹名进行配置

罗毅豪的博客

06-30

812

1.在package.json配置打包命令 "scripts": { "dev": "vite --port 3010 --mode development", "build:formGD": "vite build --mode formGD", "build:processGD": "vite build --mode processGD", "build:formSX"...

vue.config.js项目配置

guoxuying的博客

07-04

902

这是一个有关vue.config.js的配置代码

Vue3+Vite+Ant Design 后台管理系统模板.zip

07-06

Vue3+Vite+Ant Design 后台管理系统模板是一个现代且高效的前端开发框架组合，用于构建功能丰富的Web应用。这个模板结合了Vue.js的最新版本3、Vite构建工具以及Ant Design Vue UI库，旨在提供一个快速开发后台管理...

【Vue3 + Vite】Vite搭建项目解构 Vue快速学习第一期

Orion

01-28

2865

vue3+vite项目搭建，安装启动停止，项目目录解构，组件说明，CSS导入方式，Vue3实现计数器....

字蛛-字体压缩模板-vite+vue3+ts

08-05

在【压缩包子文件的文件名称列表】中，"vite-project"可能是一个包含Vite配置和项目结构的文件夹，其中可能包括`package.json`（项目依赖和脚本）、`vite.config.js`（Vite配置文件）、`src`目录（源代码）、`public...

vue篇- vueCli3.x版本中如何修改打包好的css、js、img文件名

weixin_37693991的博客

06-04

5356

#vue篇- 如何修改打包好的css、js、img文件名公司要求输出一个完全静态不变的index.html页面给别人，因而index.html中所有js,css文件名必须保证不变，只能更改文件名的版本号。原本想着是个简单需求没想到花了我整整半天时间，度娘并没有给我满意的答案，还傻乎乎地跑到尤大大的微博下问（可惜并没理我）。话不多说上代码。我用的是vueCli3.x，所有的修改全在vue.config.js中： const MiniCssExtractPlugin = require('mini-css-

vite 配置打包后js文件名，解决更新后浏览器缓存问题

小郑的博客

09-05

2928

在vite.config.js中配置。

vue 打包后文件命名

weixin_43151921的博客

04-10

2864

在 confige文件中的 index

vue 2.0 和3.0 修改打包后的默认包名

weixin_42340514的博客

08-23

2425

vue2.0 修改config文件下面index.js里 vue3.0 在项目根目录下面的vue.config.js的文件里（没有可新建） module.exports = { lintOnSave: false, productionSourceMap: false, outputDir:"adTokenPage", //设置打包后的项目目录名称 // 放置静态资源的地方 (js/css/img/font/...) assetsDir:'static..

vite：配置打包后js的文件名，解决更新后浏览器缓存问题(了解浏览器的强缓存与协商缓存)

qq_45796592的博客

06-24

2786

vite：配置打包后js文件名，解决更新后浏览器缓存问题，并了解浏览器的强缓存与协商缓存

vue修改打包之后dist文件夹名称

娄小研的博客

11-30

965

【代码】vue修改打包之后dist文件夹名称。

vue3的vite配置

weixin_52663662的博客

11-27

3391

vue3的vite配置

vue3+vite项目打包注意事项

09-09

在打包Vue3 Vite项目时，有几个注意事项需要考虑。首先，如果在更新到线上后出现了首页页面白屏的情况，可以尝试使用@vitejs/plugin-legacy插件进行浏览器向下兼容处理。这个插件可以通过以下命令进行安装：npm i @vitejs/plugin-legacy。其次，如果你的项目需要上传到浙里办的irs系统，并且只能以build文件形式进行识别，那么在打包时需要修改vite的输出路径。你可以将打包后的代码输出到build文件夹中，以满足系统的要求。另外，当你的项目涉及到毕业设计、课程设计或者其他项目源码时，建议在下载后首先打开README.md文件（如果有的话），以便了解项目的详细信息和使用说明。同时，确保项目经过助教老师测试并且可以正常运行。