Vue.js - 更改默认build打包输出目录的名称(vue2、vue3)
作者:hangge | 2025-01-08 08:39
默认情况下,当我们执行 npm run build 命令对 Vue 项目进行打包时,打包后的文件会输出到 dist 文件夹。有时我们希望更改默认输出的目录名称,只需要修改相关配置即可。下面我分别针对 Vue CLI 和 Vite 这两种方式构建的 Vue 项目进行演示。
(2)然后运行 npm run build,打包文件将输出到指定的目录。



1,Vite 构建的项目(Vue3)
(1)在 Vite 项目中,通过修改 vite.config.js(vite.config.ts)文件中的 build.outDir 配置项来更改输出目录:
export default defineConfig({ plugins: [ vue(), vueJsx(), vueDevTools(), ], resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) }, }, build: { outDir: 'target', // 自定义输出目录 }, })

2,Vue CLI 构建的项目(Vue2、Vue3)
(1)打开项目 config 文件夹下的 index.js 文件:

(2)将里面 build 节点下的 index 属性和 assetsRoot 属性中的 dist 改成新的目录名称即可:

全部评论(0)