Vue3+vite修改打包后静态资源文件夹名称

一、前言

Vue3作为前端主流框架之一，以其轻量、高效、易上手等特点受到了广大开发者的喜爱。在Vue3项目中，构建工具通常使用Webpack，而Webpack的输出目录默认为dist。但在某些场景下，我们需要对输出目录进行自定义，以满足项目需求。下面就来教大家如何设置和修改Vue3项目的输出目录。

二、修改Vite项目配置

如果你的项目是基于Vite搭建的，可以通过以下步骤修改输出目录：

（1）打开项目根目录下的vite.config.js文件。

（2）在vite.config.js文件中，添加以下配置：

export default defineConfig({
  build: {
    outDir: 'newDist', // 修改输出目录为newDist
    assetsDir：'assets-diy' // 修改自定义静态资源目录
  },
});

（3）保存并退出文件，重新运行项目构建命令（如：npm run build），此时输出目录将变为newDist。

三、注意事项

1. 修改输出目录后，记得更新相关路径，如：静态资源引用、服务器配置等。
2. 在修改输出目录时，确保新目录名称不会与现有目录冲突，以免造成不必要的麻烦。
3. 如果项目中有其他构建工具（如：Gulp、Grunt等），请参考相应文档进行输出目录的修改。