Vue CLI项目缺失build文件夹与Webpack配置，该如何处理？

Hey there! Let me clear up the confusion for you—this is totally expected behavior with Vue CLI 3 and newer versions. Here's what you need to know:

• Why there's no build folder: Vue CLI 3+ uses a "zero-config" approach, where all the core Webpack configuration is wrapped up in the @vue/cli-service npm package you installed alongside Vue CLI. The project root intentionally doesn't include a visible build folder by default, and running npm run build only outputs the dist folder (your production-ready assets) — that's normal!

• No need to manually create a build folder or install extra packages: You don't have to build out a custom build directory from scratch or fetch config files via additional npm packages. Vue CLI gives you a standardized way to tweak Webpack settings without digging into the hidden core config.

• The right way to add Webpack rules: Create a vue.config.js file in your project's root directory (if it doesn't already exist). This is the official, supported place to customize your Webpack setup. Here are two common ways to add rules:

  1. Directly modify the Webpack config object:

     module.exports = {
       configureWebpack: {
         module: {
           rules: [
             // Example: Add a rule to handle .txt files with raw-loader
             {
               test: /\.txt$/,
               use: 'raw-loader'
             }
           ]
         }
       }
     }
     

  2. Use the chainable API (great for fine-grained control):

     module.exports = {
       chainWebpack: config => {
         // Add a new rule for .txt files
         config.module
           .rule('txt')
           .test(/\.txt$/)
           .use('raw-loader')
           .loader('raw-loader')
           .end()
       }
     }
     

After setting up your vue.config.js, restart your development server or re-run npm run build—your custom Webpack rules will take effect automatically.

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