返回 导航

其他

hangge.com

Vue.js - 更改默认build打包输出目录的名称(vue2、vue3)

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

1,Vite 构建的项目(Vue3)

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

(2)然后运行 npm run build,打包文件将输出到指定的目录。

2,Vue CLI 构建的项目(Vue2、Vue3)

(1)打开项目 config 文件夹下的 index.js 文件:

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

全部评论(0)

回到顶部