如何让npm run build将dist资源文件生成到static目录？

Got it, let's get this sorted for you! To make your project's build process output all compiled assets into the static directory instead of the default dist folder, you just need to tweak two key paths in your src/config/index.js build configuration.

Here's what you need to do:

Step 1: Update the Core Build Paths #

You'll need to modify two properties in the build object: these control where your main HTML file and all static assets (CSS, JS, images, etc.) are saved after the build completes.

Updated Configuration Code #

Replace your existing build config with this adjusted version:

const path = require('path')
module.exports = {
  build: {
    env: require('./env'),
    // Redirect the main HTML file to the static directory
    index: path.resolve(__dirname, '../static/index.html'),
    // Set the root assets folder to static instead of dist
    assetsRoot: path.resolve(__dirname, '../static'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',
    productionSourceMap: true,
    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install -...
  }
}

Optional: Avoid Nested static Subfolder #

Right now, assetsSubDirectory is set to 'static', which means your assets will end up in static/static/[your-files]. If you want all assets directly in the root of the static folder (no nested subfolder), just update that line to:

assetsSubDirectory: '',

Test the Change #

Run npm run build like you normally would. You’ll find all your build-generated files (including index.html) in the static directory at your project’s root. No need to create the static folder manually—your build tool will auto-generate it if it doesn’t exist.

内容的提问来源于stack exchange，提问作者sof-03