在 Laravel 中使用 VueJs 构建工具

Question

我将 VueJs 与 Laravel 一起使用，并使用 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 as starting point. I originally posted it here https://github.com/yyx990803/laravel-vue-cli-3/issues/11#issuecomment-451154428，但会在此处复制并粘贴整个解决方法：

After banging my head against it the whole of yesterday and today, I got figured out how to still use it with a blade file.

This is more a hack/workaround until it is better supported, but works at my end. The goal is to still use my index.blade.html which has the <meta name="csrf-token" content="{{ csrf_token() }}"> inside, because I still need to use it until I build my authentication with Vue. Also I wanted to get a HMRis beheavior work, so I could still use yarn serve while developing instead of having to rerun yarn build everytime I change anything. For this we will create our own vuemix helper to replace laravel-mix mix() in our .blade.html files. I used best practices described for this.

So without further ado:

We need to create 2 new files: - /bootstrap/helpers.php - /frontend/hmr/hot

helper.php: this file adds a new laravel/blade/php helper vuemix() which we will use in our blade file instead of mix()

```
if (! function_exists('vuemix')) { /** * Get the path to a versioned Mix file. * * @param string $path * @param string $manifestDirectory * @return \Illuminate\Support\HtmlString|string * * @throws \Exception */ function vuemix($path, $manifestDirectory = '') { if (! 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
} } ```
after we have to also add our new "helpers.php" to /composer.json so laravel knows to load it:

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

with that out of the way, in your index.blade.html file replace all occurrences of mix() e.g. <body> <div id="app"> </div>  @stack('before-scripts') {!! script(mix('js/app.js')) !!} </body> with

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

you can do the same with your css files, it will then load app.js for it, since yarn serve seems to pack the css into the livereload app.js.

VERY IMPORTANT

one detailed which took me forever: if you are coming from laravel-mix you probably only link your app.js and you are done. but here you also have to link chunk-vendors.js, which for some reason get's splitted and I can't turn off, because it's a feature. so if you only had 1 line of linked JS, you now need two.

Almost done. Now we just have to edit your package.json and vue.config.json so it creates and temporary hot file when yarn serve is started and also doesn't overwrite your index.php and creates your js files without version hashes when you use yarn build. because we have linked them above directly without these hashed. the hot file modus operanti I got from laravel-mix as a way to figure out if we are using yarn serve or yarn build. don't hit me for it, I told you it's hackish ;)

package.json: edit this scripts, to copy and remove our hot file "scripts": { "serve": "cp ./hmr/hot ../public/ && vue-cli-service serve", "build": "rm -rf ../public/{js,css,img,hot} && vue-cli-service build --no-clean", } pay attention to hot on the build line, it looks almost the same then the original line.

now create /frontend/hmr/hot and fill it with this: http://localhost:8080/

now vue.config.json add this lines, from 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') } },

you can also edit indexPath back, since index isn't generated anymore while building: // modify the location of the generated HTML file. // make sure to do this only in production. indexPath: "index.html",

And with this it should now be possible to use yarn serve and yarn build with a "classical" laravel blade setup.

在 Laravel 中使用 VueJs 构建工具

Using VueJs build tools with Laravel

laravel

vue.js

vue-cli