Vue CLI 3.0配置文件位置咨询：为何项目无vue.config.js及webpack配置文件

Great question! Let me break this down clearly for you.

The reason you don’t see webpack.config.js or vue.config.js in your project’s root directory is that Vue CLI 3.0 introduced a "zero-config" design philosophy. Unlike Vue CLI 2.0, which exposed full webpack configuration files directly in the project, CLI 3+ wraps all default webpack setups into the @vue/cli-service package. This keeps your project root clean and avoids overwhelming developers with complex webpack boilerplate that most people don’t need to tweak day-to-day.

Where to add your custom configurations? #

You just need to manually create a vue.config.js file in your project root. Vue CLI will automatically detect and load this file whenever you run commands like npm run serve or npm run build.

How is this different from Vue CLI 2.0? #

• In CLI 2.0, you edited the raw webpack.config.js directly to adjust build settings.
• In CLI 3.0+, you use vue.config.js to customize configurations indirectly:
  • Use configureWebpack to merge your custom webpack config with the default one (supports both object and function syntax).
  • Use chainWebpack to modify the default webpack config via a chaining API—perfect for fine-grained adjustments to rules, plugins, etc.

Quick Example: Setting up a path alias #

Here’s a simple vue.config.js to create an alias for your src folder, making imports cleaner:

const path = require('path')

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src')
      }
    }
  }
}

Curious about the default webpack config? #

Run this command in your project terminal to print the full default configuration:

vue inspect

You can even target specific parts, like vue inspect --rule vue to see the config for .vue files.

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