文章/答案/技术大牛

发布

社区首页 >问答首页 >laravel 9+ Vue.js 2与Vite I面对误差

问laravel 9+ Vue.js 2与Vite I面对误差
EN

Stack Overflow用户

提问于 2022-08-06 16:12:10

回答 1查看 1.6K关注 0票数 2

我在laravel 9中是新的，我的旧项目im使用laravel 7和laravel/UI vue.js 2作为我的项目，现在我使用的是laravel 9和vue.js 2，我的项目是VITE，这是我在laravel 7中使用的旧风格，但是我在LARAVEL 9中遇到了一些错误。错误

无法设置未定义的属性(设置'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',
        },
    },
});

vuejs2

vite

laravel-9

laravel

eloquent

回答 1

Stack Overflow用户

发布于 2022-08-06 17:42:30

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

票数 -2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73261357

复制

相似问题

问laravel 9+ Vue.js 2与Vite I面对误差
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问laravel 9+ Vue.js 2与Vite I面对误差EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问laravel 9+ Vue.js 2与Vite I面对误差
EN