文章/答案/技术大牛

发布

社区首页 >问答首页 >在laravel 9教程中的Vue 3集成不起作用

问在laravel 9教程中的Vue 3集成不起作用
EN

Stack Overflow用户

提问于 2022-11-26 18:13:55

回答 1查看 39关注 0票数 0

我在使用Laravel之前做了一些项目，但是这次我决定在我的项目的前端使用Vue.js，我正在寻找一些教程来了解如何将Vue.js集成到我的Laravel项目中。我尝试了几个教程，所以我将只使用谈谈我试过的最后一个教程

首先，我添加了依赖项，我的package.json文件如下所示

 "devDependencies": {
        "axios": "^1.1.2",
        "laravel-vite-plugin": "^0.7.1",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "vite": "^3.2.4"
    },
    "dependencies": {
        "@vitejs/plugin-vue": "^3.2.0",
        "vue": "^3.2.36",
        "vue-loader": "^17.0.1"
    }

我更新了vite.config.js文件如下所示

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

export default defineConfig({
    plugins: [
        vue(),
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

在参考资料/js中，我创建了一个名为components的文件夹，并在其中使用了我希望用于第一次测试的模板创建了app.vue。

<template>
    <h1>Laravel 9 with Vue integration, with vite</h1>
</template>

在参考资料/js中，我更新了我的app.js如下

import './bootstrap';

import { CreateApp } from 'vue';

import app from './components/app.vue';


CreateApp(app).mount('#app');

最后，在我的刀片文件welcome.blade.php上，我更新了它如下

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <!-- Fonts -->
        <link href="https://fonts.bunny.net/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
        @vite('resources/css/app.css')
    </head>
    <body>
     <div id='app'></div>

     @vite('resources/js/app.js')
    </body>
</html>

完成此操作后，我让npm，然后通常的php服务，但是我在app.vue文件上创建的模板没有显示出来。我尝试了几个教程，我也有同样的问题。出于好奇，由于我在刀片文件中也使用了@vite For css文件，所以我尝试更改css.file中的背景颜色，这很有效，所以我不知道为什么我的模板没有显示

先谢谢你

更新：

当我检查的时候，我发现我得到了这个错误

Uncaught :请求的模块‘/node_ does /..vite/deps/vue.js?v=d69a4051’不提供名为“CreateApp”的导出(在app.js:3:10)。

我还在努力想办法解决这个问题

laravel

vue.js

vite

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-11-26 18:47:23

为这个(愚蠢的)找到了一个修复--我的问题在我的app.js文件中

当然，CreateApp并不存在。我写错了大写字母，但它被写成了“createApp”。

票数 0

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

原文链接：

https://stackoverflow.com/questions/74584565

复制

相似问题

问在laravel 9教程中的Vue 3集成不起作用
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在laravel 9教程中的Vue 3集成不起作用EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在laravel 9教程中的Vue 3集成不起作用
EN