Laravel Nova自定义工具Vue编译报错：Cannot read properties of undefined (reading '_c')

1. 复用Nova的Vue实例，避免重复打包 #

Laravel Nova自身已集成Vue 2，自定义工具无需打包独立的Vue副本，修改工具根目录下的webpack.mix.js，添加外部依赖配置：

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

mix.js('resources/js/tool.js', 'dist/js')
    .vue({ version: 2 })
    .sass('resources/sass/tool.scss', 'dist/css')
    .webpackConfig({
        externals: {
            vue: 'Vue',
            'vue-template-compiler': 'VueTemplateCompiler'
        },
        plugins: [
            new webpack.DefinePlugin({
                'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
            })
        ]
    });

执行以下命令重新构建：

rm -rf node_modules package-lock.json
npm install
npm run dev

2. 统一vue-loader版本 #

工具与父项目的vue-loader版本存在细微差异（工具15.10.2，父项目15.9.6），修改工具的package.json，将vue-loader版本对齐父项目：

"devDependencies": {
    // 其他依赖保持不变
    "vue-loader": "^15.9.6"
}

重新安装依赖并构建工具。

3. 检查工具入口文件的组件注册 #

确保工具的resources/js/tool.js正确注册组件，名称需与NovaServiceProvider中配置的路径一致：

import Tool from './components/Tool';

Nova.booting((app, store) => {
    app.component('admin-agenda', Tool);
});

比如你在NovaServiceProvider中注册的工具路径是admin-agenda，组件名就必须和这个字符串完全匹配。

4. 调整Vue编译选项 #

修改工具的webpack.mix.js，添加Vue编译选项，避免模板编译冲突：

mix.js('resources/js/tool.js', 'dist/js')
    .vue({
        version: 2,
        options: {
            compilerOptions: {
                preserveWhitespace: false
            }
        }
    })
    .sass('resources/sass/tool.scss', 'dist/css');

5. 清理全链路缓存 #

• Laravel端缓存清理：

  php artisan cache:clear
  php artisan config:clear
  php artisan view:clear
  

• 浏览器端：清空缓存或使用无痕模式访问Nova面板

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