带有 Vue.js 和 webpack 的 Laravel 6，而不是常规的 Vue

Posted 2023-02-23

【中文标题】带有 Vue.js 和 webpack 的 Laravel 6，而不是常规的 Vue

【英文标题】：Laravel 6 with Vue.js and webpack instead of regular Vue

【发布时间】：2020-04-14 05:52:50

【问题描述】：

所以我使用composer create-project --prefer-dist laravel/laravel FullStack 命令创建了一个新的 Laravel 项目。

之后我运行了composer require laravel/ui 命令。 然后是npm install 和npm run dev 命令 . 我希望我的 app.js 文件看起来像这样：

require('./bootstrap');



Vue.component('videoup', require('./components/VideoUpload.vue'));


const app = new Vue(
  el: '#app'
);

但是我的 app.js 文件中有这段代码：

/******/ (function(modules)  // webpackBootstrap
/******/    // The module cache
/******/    var installedModules = ;
/******/
/******/    // The require function
/******/    function __webpack_require__(moduleId) 
/******/
/******/        // Check if module is in cache
/******/        if(installedModules[moduleId]) 
/******/            return installedModules[moduleId].exports;
/******/        
/******/        // Create a new module (and put it into the cache)
/******/        var module = installedModules[moduleId] = 
/******/            i: moduleId,
/******/            l: false,
/******/            exports: 
/******/        ;
/******/

如何使用 Vue.js 设置 Laravel 6 以进行全栈开发？

【参考方案1】：

您可能想查看 Laravel Mix 文档。 https://laravel.com/docs/6.x/mix

【讨论】：

为什么我必须使用 webpack 开始？我只想将 Vue.js 应用到我的 laravel 6 应用程序

你可以用脚手架自己制作。不过，这将需要更多的时间和精力。另外，请问您为什么不希望 webpack 参与您的项目？

因为我遇到的教程都没有使用webpack

关于 webpack 没什么可问的，因为 laravel mix 为你完成了所有工作。它只是增加了应用程序 javascript 的可扩展性。我建议您无需担心。它甚至可以防止您的代码被盗，但只是部分地。不过，您可能对 pusher 的教程感兴趣：blog.pusher.com/web-application-laravel-vue-part-1 您可以从头到尾继续阅读，以明确其实际工作原理。