在Laravel中使用VueJs构建工具

我将VueJs与Laravel一起使用，并将Laravel默认安装的VueJs与Laravel混合使用

我想使用Babel、Eslint和Vue路由器，所有这些似乎都不是Laravel的默认安装

---

我如何使用Vue Cli来处理Laravel的所有这些问题，或者我是否需要将所有内容单独拉入Vue Cli的构建目的？

Vue Cli旨在从零开始引导SPA，其主要目的是支持Vue.js的网站

您在这里使用的是Laravel，它总是将所有内容都自举，所以我想您自己也可以将其包括在内。据我所知，巴别塔已经包括在内

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

---

设置起来并不难。

我想将我的

laravel mix

应用程序更改为使用

vue cli

，而不必失去直接使用laravel提供

*.blade.php

文件的可能性。几天后，我让它工作了，希望它能帮助别人

作为参考，这将用作起点。我最初将其发布在此处，但将在此处复制并粘贴整个解决方案：

昨天和今天，我的头撞了它一整天后，我 找到了如何在刀片锉刀上使用它的方法

在得到更好的支持之前，这更像是一种破解/解决方法，但它确实有效 在我这边。目标是仍然使用我的index.blade.html，它具有

内部， 因为在使用构建身份验证之前，我仍然需要使用它 Vue。我还想得到一个HMRis beheavior的作品，这样我仍然可以使用它

纱线在开发时提供

，而不必重新运行

纱线构建

每次我改变什么。为此，我们将创建自己的

vuemix

helper替换.blade.html文件中的laravel mix

mix（）

。我曾经 所述最佳做法 为了这个

因此，毋庸置疑：

我们需要创建2个新文件： -

/bootstrap/helpers.php

-

/frontend/hmr/hot

helper.php：此文件添加了一个新的laravel/blade/php helper

vuemix（）

，我们将在刀片文件中使用它，而不是

mix（）

``` 如果（！function_存在（'vuemix'））{ /** *获取版本化混合文件的路径。 * *@param string$path *@param string$manifestDirectory *@return\light\Support\HtmlString | string * *@throws\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

so laravel知道如何加载它：

“自动加载”：{
…

“文件”：[
...
“bootstrap/helpers.php”
]
}，

这样，在

index.blade.html

文件中，替换所有 出现

mix（）

例如

@堆栈（'before-scripts'）
{！！脚本（mix（'js/app.js'））

带有

@堆栈（'before-scripts'）
{{script（vuemix（'js/app.js'））}
{script（vuemix（'js/chunk vendors.js'））}

您也可以对css文件执行同样的操作，然后它将加载app.js以 它，因为

纱线服务

似乎将css打包到livereload中 app.js

非常重要

一个让我永生难忘的细节：如果你来自

laravel mix

您可能只链接了

app.js

，就完成了。 但在这里，您还必须链接

chunk vendors.js

，这对于某些人来说 reason get被拆分了，我无法关闭，因为这是一个功能。所以 如果只有一行链接的JS，那么现在需要两行

差不多了。现在我们只需编辑您的

包.json

和

vue.config.json

因此它在

SERVICE

已启动，并且不会覆盖index.php和 使用

创建js文件时不使用版本哈希
构建

。因为我们在上面直接链接了它们，而没有这些 散列。

hot

文件modus operanti作为一个 确定我们使用的是

纱线服务

还是

纱线构建

。不要 打我吧，我告诉过你这很不礼貌；）

package.json:编辑此脚本，以复制和删除我们的

hot

文件

“脚本”：{
“服务”：“cp./hmr/hot../public/&&vue cli服务服务”，
“构建”：“rm-rf../public/{js，css，img，hot}&&vue cli服务构建--不干净”，}

注意构建行上的hot， 它看起来几乎和原来的线条一样

现在创建

/frontend/hmr/hot

并用以下内容填充它：

http://localhost:8080/

现在

vue.config.json

添加以下行：

////禁用Index.html生成//禁用中的哈希
filenames filenameHashing:false，//删除与HTML相关的网页包
插件链接网页包：config=>{
if（process.env.NODE_env==“生产”）{
config.plugins.delete（'html'）
config.plugins.delete（'preload'）
config.plugins.delete（'prefetch'）
}}，

您还可以向后编辑

indexPath

，因为不会生成索引 生成时继续：

//修改生成的
HTML文件//确保仅在生产环境中执行此操作。indexPath:
“索引.h