Vue项目Vue CLI运行正常，Webpack构建后组件生命周期不执行

我排查许久后确定问题出在Webpack配置中，因多种原因必须使用Webpack，无法替代。

我有一个基础Vue项目，使用npx vue-cli-service serve启动时完全正常，示例组件如下：

<template>
    <header class="app-header">
        {{ items }}
        {{ msg }}

        <ul>
            <li v-for="item in items" :key="item.message">
                {{ item.message }}
            </li>
        </ul>
    </header>
</template>

<script>
export default {
    name: 'TheAppHeader',
    props: {
        msg: String
    },
    data() {
        return {
            items: [{ message: 'Foo' }, { message: 'Bar' }],
        }
    },
    created() {
      // eslint-disable-next-line no-console
      console.log('here');
      this.items.push({ message: 'FooBar' });
    }
}
</script>

该组件通过<TheAppHeader msg="test"></TheAppHeader>调用，能正常渲染msg、items，且console.log输出正常。

但使用npx webpack build构建后，仅msg能正常传递，this.items不渲染，console.log无输出，data()和created()均未执行。以下是我的配置文件：

vue.config.js：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    devtool: 'source-map',
  }
})

webpack.config.js：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader')
const webpack = require('webpack');
const ESLintPlugin = require('eslint-webpack-plugin');


module.exports  = (env, argv) => { 
    let config = {
        target: 'web',
        mode: 'development',
        module: {
            rules: [
                {
                    test: /\.(png|jpe?g|gif|svg)$/i,
                    type: 'asset/resource',
                    generator: {
                        filename: 'images/[hash][ext][query]'
                    }
                },
                {  
                    test: /\.(woff|woff2|eot|ttf|otf)$/,
                    type: 'asset/resource',
                    generator: {
                        filename: 'fonts/[hash][ext][query]'
                    }
                },
                {
                    test: /\.vue$/,
                    loader: 'vue-loader',
                    options: {
                        babelParserPlugins: [
                          'jsx',
                          'classProperties',
                          'decorators-legacy'
                        ]
                      }
                },
                // this will apply to both plain `.js` files
                // AND `<script>` blocks in `.vue` files
                {
                    test: /\.js$/,
                    loader: 'babel-loader'
                },
                // this will apply to both plain `.css` files
                // AND `<style>` blocks in `.vue` files
                {
                    test: /\.css$/,
                    use: [
                        'vue-style-loader',
                        'css-loader'
                    ]
                },
            ],
        },
        entry: {
            vue:     './src/main.js'
        },
        optimization: {
            minimize: true
        },
        output: {
            filename: '[name].bundle.js',
            path: path.resolve(__dirname, 'distribution'),
            clean:true,
            publicPath: '/app/',
        },
        plugins: [
            new HtmlWebpackPlugin({
                template: './public/index.html'
            }),
            new VueLoaderPlugin(),
            new webpack.DefinePlugin({
                // Drop Options API from bundle
                __VUE_OPTIONS_API__: false,
                // Enable devtools support
                __VUE_PROD_DEVTOOLS__ : true,
                'process.env': {
                    BASE_URL: '"/"'
                  }
            }),
            new ESLintPlugin(
                {
                  
                  extensions: [
                    '.js',
                    '.jsx',
                    '.vue'
                  ],
                  cache: true,
                  failOnWarning: false,
                  failOnError: true,
                  formatter: 'stylish',
                }),
        ],
    }
    return config;
}

请问此Webpack配置存在什么问题？这类问题常见吗？

核心问题：Options API被强制禁用 #

你的Webpack配置中，webpack.DefinePlugin设置了__VUE_OPTIONS_API__: false，但你的组件完全基于Vue的Options API编写（使用data()、created()等选项式语法）。当这个全局标识设为false时，Vue会在构建过程中剔除所有Options API相关的运行时代码，导致组件的响应式数据初始化、生命周期钩子都无法正常执行——只有props能生效，因为props在Composition API中也被支持。

解决方法：将__VUE_OPTIONS_API__改为true，匹配组件使用的API风格：

new webpack.DefinePlugin({
    __VUE_OPTIONS_API__: true, // 修改此处
    __VUE_PROD_DEVTOOLS__ : true,
    'process.env': {
        BASE_URL: '"/"'
    }
}),

次要问题：开发模式下启用代码压缩 #

当前配置中mode: 'development'但optimization.minimize: true，开发模式下开启代码压缩会增加构建时间，还会混淆代码导致调试困难。建议将minimize改为false，仅在production模式下启用压缩：

optimization: {
    minimize: argv.mode === 'production' // 根据模式动态设置
},

潜在路径问题（非当前故障直接原因） #

输出配置的publicPath: '/app/'，如果你的项目部署路径并非/app/，可能会导致静态资源加载失败，需要根据实际部署环境调整该值。

这类问题属于手动配置Webpack替代Vue CLI时的典型踩坑场景。Vue CLI会自动检测项目使用的API风格（Options/Composition），并自动配置__VUE_OPTIONS_API__等全局标识；但手动编写Webpack配置时，很容易忽略这些与Vue运行时相关的全局变量设置，导致API与构建配置不匹配，进而出现组件逻辑失效的问题。

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