如何在Vuetify项目中修改构建输出目录？

用npm create vuetify@latest创建的项目，根据你选择的构建工具，分两种方式配置，就能实现和之前Vite一样的输出目录效果：

若项目基于Vite构建（默认选项） #

这类项目依然可以通过vite.config.js配置，写法和你之前的Vite配置几乎一致：

// vite.config.js
import { defineConfig } from 'vite'
import vuetify from 'vite-plugin-vuetify'

export default defineConfig({
  plugins: [vuetify()],
  build: {
    outDir: '../resources/static/',
    emptyOutDir: true
  }
})

注意：开启emptyOutDir时，要确保../resources/static/目录已存在，或者Vite有足够权限创建它，避免构建报错。

若项目基于Vue CLI（Webpack）构建 #

如果创建时选了Vue CLI，就修改vue.config.js文件，用outputDir对应原来的outDir，配置清空目录的逻辑对应emptyOutDir：

// vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  pluginOptions: {
    vuetify: {} // Vuetify专属配置放这里，不影响输出目录设置
  },
  outputDir: '../resources/static/',
  // 构建前清空输出目录
  chainWebpack: config => {
    config.plugin('clean').tap(args => {
      args[0].cleanOnceBeforeBuildPatterns = ['**/*']
      return args
    })
  }
})

嫌上面写法繁琐的话，也可以用更简洁的配置：

// vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  outputDir: '../resources/static/',
  cleanOptions: {
    cleanStaleWebpackAssets: true,
    protectWebpackAssets: false
  }
})

验证配置 #

修改完成后运行npm run build，构建产物就会自动输出到Spring Boot项目的src/main/resources/static/目录中，和你之前Vite配置的效果完全一致。

内容的提问来源于stack exchange，提问作者HellishHeat