laravel 9 + Vue.js 2 和 Vite 我面临错误

Question

I'm new in laravel 9 and vite my old project im using laravel 7 with laravel/UI vue.js 2 for my project now im using laravel 9 and vue.js 2 and vite for my project im developed as my old style in used in laravel 7,但我在 LARAVEL 9 WITH VITE 中遇到了一些错误。错误

无法设置未定义的属性（设置“id”）

我的项目代码APP.VUE

require('./bootstrap');
import {Vue} from "vue";
import router from "./router";

window.Vue = require('vue');
const app = new Vue({
    el: '#app',
    router,
});

路由器

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

// MainComponents
  import Home from "./components/MainComponents/Home.vue";
 
  
const routes = [
    //Admin Login
    {
        path: "/",
        name: "Home",
        component: Home,
    },
  
];

const router = new VueRouter({
    routes,
    mode: "history",
});

export default router;

WELCOME.BLADE.PHP

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>HELLO</title>

    @vite('resources/css/app.css')
</head>
<body>
    <div id="app">
        <router-view></router-view>
    </div>
    @vite('resources/js/app.js')
</body>
</html>

WEB.PHP

<?php

use Illuminate\Support\Facades\Route;
 

Route::get('/', function () {
    return view('welcome');
});

Route::get('{any}', function () {
    return view('welcome');
})->where('any', '.*');

零件

<template>
       <div >
                       MAIN PAGE COMPONENT                         
       </div> 
</template>

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/sass/app.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    resolve: {
        alias: {
            vue: 'vue/dist/vue.esm-bundler.js',
        },
    },
});

Answer 1

首先，在 vite 项目中使用require并不实际，但如果你这样做，你必须使用插件或手动解决它。 id 错误是来自 vite 文件本身还是来自您的代码？

Answer 2

如果您仍然没有成功，我建议您使用 laravel 检查此链接 vite

并使用vite-plugin-vue2

如果有，请分享

laravel 9 + Vue.js 2 和 Vite 我面临错误

问题描述

1 个解决方案

解决方案1
0 2022-08-06 17:42:30

解决方案2
0 2022-08-30 21:18:44

laravel 9 + Vue.js 2 和 Vite 我面临错误

问题描述

1 个解决方案

解决方案1 0 2022-08-06 17:42:30

解决方案2 0 2022-08-30 21:18:44

解决方案1
0 2022-08-06 17:42:30

解决方案2
0 2022-08-30 21:18:44