Question

我在Laravel中使用VueJs，并使用Laravel默认安装的VueJs和他们的Laravel-Mix。

我想使用Babel，Eslint和Vue-Router，所有这些似乎都没有Laravel的默认安装？

如何使用Vue Cli使用Laravel处理所有这些，或者我是否需要单独提取所有内容，这是为Vue Cli构建的？

Answer 1

Vue CLI用于从头开始引导SPA，主要目的是Vue.js支持的网站。

你在这里使用Laravel，它总是包含所有引导程序，所以我想最简单的方法就是自己包含它。根据我的理解，已经包含了Babel。

如果您还想使用ESLint和vue-router，可以查看Vue.js CLI中的Github存储库，了解如何设置它：

https://github.com/vuejs-templates/webpack

设置并不难。

Answer 2

我想将自己的laravel-mix应用程序更改为使用vue-cli，而不必失去直接使用laravel服务*.blade.php文件的可能性。几天后，我开始使用它了，希望它对其他人有帮助。

作为参考，这里以https://github.com/yyx990803/laravel-vue-cli-3作为起点。我最初将其发布在这里https://github.com/yyx990803/laravel-vue-cli-3/issues/11#issuecomment-451154428，但会在此处复制并粘贴整个解决方法：

在整个昨天和今天我的头都撞了一下之后，我   弄清楚了如何仍然将其与刀片文件一起使用。

在获得更好的支持之前，这更像是一种hack /解决方法，但是可以   在我的尽头。目标是仍然使用我的index.blade.html   <meta name="csrf-token" content="{{ csrf_token() }}">里面，   因为在建立身份验证之前，我仍然需要使用它   Vue。我也想获得HMRis的行为，所以我仍然可以使用   yarn serve，而不必重新运行yarn build   每次我改变任何东西。为此，我们将创建自己的vuemix   在我们的.blade.html文件中替换laravel-mix mix()的助手。我用了   描述的最佳做法   here   为此。

因此，事不宜迟：

我们需要创建2个新文件：   -/bootstrap/helpers.php   -/frontend/hmr/hot

helper.php ：此文件添加了一个新的laravel / blade / php帮助器vuemix()，我们将在刀片文件中使用它而不是mix()

```

if（！function_exists（'vuemix'））{       / **        *获取版本化的Mix文件的路径。        *        * @参数字符串$ path        * @参数字符串$ manifestDirectory        * @return \ Illuminate \ Support \ HtmlString | string        *        * @抛出\ Exception        * /       函数vuemix（$ path，$ manifestDirectory =''）       {           如果（！Str :: startsWith（$ path，'/'））{               $ path =“ / {$ path}”;           }
    // check if HMR server is running via helper file 'hot'
    if (file_exists(public_path($manifestDirectory.'/hot'))) {
        $url = file_get_contents(public_path($manifestDirectory.'/hot'));
        $main = '/app.js'; // only use this as path, because css, etc are already packed in HMR mode

        if (Str::startsWith($url, ['http://', 'https://'])) {
            return new HtmlString(Str::after($url, ':').$main);
        }

        return new HtmlString('//localhost:8080'.$main);
    }
    return new HtmlString($path); // return path without changing anything aka production
} } ```
之后，我们还必须将新的“ helpers.php”添加到/composer.json   laravel知道要加载它：

"autoload": { ... "files": [ ... "bootstrap/helpers.php" ] },

将其替换为index.blade.html文件中的所有内容   mix()的出现，例如<body> <div id="app"> </div>  @stack('before-scripts') {!! script(mix('js/app.js')) !!} </body>和

<body> <div id="app"> </div>  @stack('before-scripts') {{script(vuemix('js/app.js'))}} {{script(vuemix('js/chunk-vendors.js'))}} </body>

您可以对CSS文件执行相同的操作，然后将加载app.js用于   它，因为yarn serve似乎将css打包到livereload中   app.js。

非常重要

一个细节使我永远：如果你来自   laravel-mix您可能只链接了app.js，您就完成了。   但在这里您还必须链接chunk-vendors.js，对于某些   原因get分裂了，我无法关闭，因为它是一个功能。所以   如果只有1行链接的JS，则现在需要两行。

快完成了。现在，我们只需要编辑您的package.json并   vue.config.json，因此它会在hot启动时创建临时yarn serve文件，并且不会覆盖您的index.php和   使用yarn build时，您可以创建没有版本哈希的js文件。因为我们直接在上面将它们链接在一起而没有这些   散列。我从hot获得的laravel-mix文件方式操作   确定我们使用yarn serve还是yarn build的方法。别   为此打了我，我告诉你它很黑；）

package.json ：编辑此脚本，要复制和删除我们的hot文件"scripts": { "serve": "cp ./hmr/hot ../public/ && vue-cli-service serve", "build": "rm -rf ../public/{js,css,img,hot} && vue-cli-service build --no-clean", }，请注意构建行上的 hot ，   它看起来与原始行几乎相同。

现在创建/frontend/hmr/hot并用以下内容填充：http://localhost:8080/

现在vue.config.json从vue-cli documentation添加以下行：   //// Disable Index.html Generation // disable hashes in filenames filenameHashing: false, // delete HTML related webpack plugins chainWebpack: config => { if (process.env.NODE_ENV === "production") { config.plugins.delete('html') config.plugins.delete('preload') config.plugins.delete('prefetch') } },

您也可以编辑indexPath，因为不会生成索引   在构建过程中：// modify the location of the generated HTML file. // make sure to do this only in production. indexPath: "index.html",

现在，应该可以将yarn serve和yarn build与“经典” laravel刀片设置结合使用了。

在Laravel中使用VueJs构建工具

2 个答案: