我在使用Laravel之前做过项目，但是这次我决定在我的项目中使用Vue.js作为我的前端，我正在寻找一些教程来看看我如何在我的Laravel项目中集成Vue.js。我尝试了几个教程，所以我将只使用talk about the last tutorial i tried
首先我添加了依赖项，我的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,}),],});
在resources/js中，我创建了一个名为components的文件夹，并在其中创建了app.vue，其中包含我想用于第一次测试的模板。
<template><h1>Laravel 9 with Vue integration, with vite</h1></template>
在resources/js中，我更新了我的app.js，使其看起来如下所示
import './bootstrap';import { CreateApp } from 'vue';import app from './components/app.vue';CreateApp(app).mount('#app');
最后在我的blade文件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运行dev，然后运行通常的php artisan serve。然而，我在app.vue文件上创建的模板没有显示。我尝试了几个教程，我遇到了同样的问题。出于好奇，因为我也在我的blade文件上使用了css文件的@vite，我试着改变css.文件的背景颜色，结果成功了，所以我不知道为什么我的模板没有显示
提前感谢您
最新消息：
发现我得到这个错误，当我检查
未捕获的语法错误：请求的模块“/node_modules/.vite/deps/vue.js？v= d 69 a4051”未提供名为“CreateApp”的导出（位于app.js：3：10）
我还在努力寻找解决办法
1条答案
按热度按时间5cnsuln71#
找到了一个修复这个（愚蠢的一个）我的问题是在我的app.js文件
当然，CreateApp并不存在。我错误地用大写字母开头，但它被写成了“createApp”。