为什么 Vue 3 在 Laravel 5.8 上呈现没有方法和数据的组件

Question

在 Laravel 5.8，我需要将一个项目从 Vue 2 翻译到 3。

我把组装调整到不再报错的阶段，开始显示元件。但！他们是空的。没有方法或内部属性。但是外部道具有效。终端和控制台没有错误。为什么？如何解决？

app.js :

require('./bootstrap');
/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */
import {createApp} from 'vue';

let app = createApp({})


import PrivateOffice from "./PrivateOffice";
app.component('private-office', PrivateOffice);

app.mount("#app");

privateOffice.vue :

<template>
    <div @click="consoleShow" class="myBtn">
        Hello
    </div>
</template>

<script>
    export default {
        name: "PrivateOffice",
        data() {
            return {
                click: 0
            }
        },
        methods: {
            consoleShow() {
                this.click++;
                console.log(this.click)
            }
        }
    };
</script>

<style lang="scss">
    .myBtn {
        padding: 12px;
        background-color: #cdcdcd;
        user-select: none;
        cursor: pointer;

        &:hover {
            background-color: #8A8A8A;
            color: white;
        }
    }
</style>

webpack-mix:

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

const dotenv = require('dotenv')
/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */


mix.override((config) => {
    delete config.watchOptions;
});

mix.webpackConfig({
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: "sass-loader",
                        options: {
                            prependData: `@import "public/scss/abstract.scss";`,
                        },
                    }
                ]
            }
        ]
    },
    plugins: [
        new webpack.DefinePlugin({
            __VUE_OPTIONS_API__: false,
            __VUE_PROD_DEVTOOLS__: false,
        }),
        new webpack.DefinePlugin({
            'process.env': JSON.stringify(dotenv.config().parsed) // it will automatically pick up key values from .env file
        })
    ],
});


mix.alias({
    '@': path.resolve('resources/js'),
    "@model": path.resolve("resources/js/models"),
    "@component": path.resolve("resources/js/components"),
    "@style": path.resolve("resources/js/assets/scss")
})

mix.js('resources/js/app.js', 'public/js')
    .vue()
    .sass('resources/js/public/scss/style.scss', 'public/css');

渲染组件：http://prntscr.com/1zrqkhd

点击一个按钮，没有任何反应。

Answer 1

我们编写了 npm u 命令，现在可以使用了。好像是版本冲突，或者是少了一些包。
如果页面上包含超过一个 app.js，也会出现类似的问题。

啊哈，用谷歌搜索了我自己的答案:D

为什么 Vue 3 在 Laravel 5.8 上呈现没有方法和数据的组件

Why Vue 3 render components without methods and data on Laravel 5.8

laravel

vue.js

laravel-5.8

vuejs3

laravel-mix-vue3