简体   繁体   English

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

laravel 9 + Vue.js 2 And Vite im facing error

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文简体   中文繁体   英文版本 版本,有任何建议请联系yoyou2525@163.com。

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, but im facing some error IN LARAVEL 9 WITH VITE. 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 中遇到了一些错误。 ERROR错误

Cannot set properties of undefined (setting 'id')无法设置未定义的属性(设置“id”)

MY PROJECT CODE APP.VUE我的项目代码APP.VUE

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

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

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 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 WEB.PHP

<?php

use Illuminate\Support\Facades\Route;
 

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

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

COMPONENT零件

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

vite.config.js 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',
        },
    },
});
1 个回复

First things first, it is not really practical to use require in vite project, but if you do, you have to either use a plugin or manually work around it.首先,在 vite 项目中使用require并不实际,但如果你这样做,你必须使用插件或手动解决它。 Does the id error comes from the vite file itself or from your code? id 错误是来自 vite 文件本身还是来自您的代码?

1 错误:将 vue.js 安装到 Laravel 项目时找不到模块 &#39;C:\vite\bin\vite.js&#39; - Error: Cannot find module 'C:\vite\bin\vite.js' when installing vue.js to Laravel project

我想学习 Laravel 和 Vue.js,所以我尝试按照本教程安装两者: https ://youtu.be/WLQDpY7lOLg?t=1058 一切正常,直到 npm run dev 命令... 这些是我在 Laravel 项目终端中运行的命令(在 21:19 的教程中) 这是我运行最后 ...

2 Vue.js vite 构建 - Vue.js vite build

我有一个 router.js,所有路由和组件都在其中。 这些目前通过导入集成。 但现在我希望他们用延迟加载重新加载。 到目前为止,我也对此进行了调整,暂时只有一条路线。 现在我遇到了问题,如果我查看 via npm run dev 它可以工作,我构建了项目,但现在,我收到以下错误 未捕获的 Re ...

4 在 vue.js 中遇到此错误的问题“未定义上传” - Facing an issue with this error in vue.js "upload is not defined"

在这里,我使用此 vue.js 代码进行多次上传图像。 所以在这里我面临一个错误。 所以请告诉我哪里出错了。 错误是 所以请帮我弄清楚这一点。 当我上传图像时,图像没有显示,我面临这个错误,比如“上传未定义”。 所以请帮我解决这个问题,我正在尝试很多,但 oty 能够解决这个问题 ...

2021-12-10 12:02:11 0 18   vue.js
6 Vue.js 2和Laravel - Vue.js 2 and Laravel

对于使用Laravel(API)作为后端而将Vue.js2用作前端的大型网站,最好的方法/方法是什么。 这里的主要问题是如何拆分javascript(VUE)并仅在给定路由内需要时才需要,因为此项目中有很多javascript。 1。 有没有可以做到这一点的工具? 还是通过API知道 ...

7 Laravel 中的 Vue.js - Vue.js in Laravel

我第一次尝试将 vue.js 与 laravel 一起使用。 在blade.php 文件中: 在 app.js 文件中: 在 vue 文件中: 我没有收到任何错误,但是本地主机在应该显示“FavourUp”时显示一个空网页 ...

10 Vue.js - 使用 Vite 将应用程序打包为 Figma 插件 - Vue.js - Package app as Figma Plugin using Vite

我有一个使用 Vite 创建的 Vue.js 应用程序。 当我使用npm run dev并在浏览器中访问该应用程序时,该应用程序成功运行。 现在,我尝试将应用程序捆绑为单个代码文件,以便我可以将其用作Figma的插件。 我知道index.html页面会加载,因为我可以编辑 HTML 并查看更改。 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM