Laravel Mix运行npm打包时出现__VUE_OPTIONS_API__值冲突警告

问题根因 #

你遇到的冲突警告是因为Laravel Mix 6及以上版本在启用Vue3支持时，会自动通过DefinePlugin注入__VUE_OPTIONS_API__和__VUE_PROD_DEVTOOLS__两个全局变量，你在webpackConfig中又手动新增了一次DefinePlugin定义同一个变量，两个定义重复触发了警告。

解决方法 #

不需要自己手动定义Vue相关的全局变量，直接通过Mix提供的Vue配置项传参即可，修改你的webpack.mix.js代码如下：

1. 删掉webpackConfig里手动新增的DefinePlugin相关代码
2. 在.vue()配置中新增optionsApi: false参数来关闭Options API支持

修改后的完整webpack.mix.js参考：

const mix = require('laravel-mix');

require('laravel-mix-bundle-analyzer');
require('laravel-mix-eslint')

mix.js('resources/js/app.js', 'public/js')
    // 直接通过optionsApi参数配置，Mix会自动处理全局变量注入
    .vue({ version: 3, optionsApi: false })
    .webpackConfig((webpack) => {
        return {
            output: { publicPath: '/', },
            plugins: [],
        };
    })

if (!mix.inProduction()) {
    mix.eslint({
        fix: false,
        extensions: ['js', 'vue']
    }).sourceMaps().bundleAnalyzer({ analyzerMode: 'static' });
}

• 如果你后续需要启用Vue Options API支持，只需要将上面配置中的optionsApi参数改为true即可，不需要额外修改其他配置。

修改完成后重新执行npm run development或npm run production即可消除警告。

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