我将 VueJs 与 Laravel 一起使用,并将 Laravel 默认安装的 VueJs 与他们的 Laravel-Mix 一起使用。
我想使用 Babel、Eslint 和 Vue-Router 所有这些似乎都没有随 Laravel 的默认安装一起提供?
我如何使用 Vue Cli 来通过 Laravel 处理所有这些,或者我是否需要单独拉入所有内容,而 Vue Cli 正是为此而构建的?
最佳答案
我想更改我的 laravel-mix
申请使用vue-cli
而不必失去为我的*.blade.php
服务的可能性直接用 laravel 文件。几天后我开始使用它,希望它能帮助其他人。
作为引用,这使用了 https://github.com/yyx990803/laravel-vue-cli-3作为起点。我最初把它贴在这里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 useyarn serve
while developing instead of having to rerunyarn build
everytime I change anything. For this we will create our ownvuemix
helper to replace laravel-mixmix()
in our .blade.html files. I used best practices described here 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 ofmix()
```
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 ofmix()
e.g.<body> <div id="app"> </div><!-- #app --> <!-- Scripts --> @stack('before-scripts') {!! script(mix('js/app.js')) !!} </body>
with
<body> <div id="app"> </div><!-- #app --> <!-- Scripts --> @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 yourapp.js
and you are done. but here you also have to linkchunk-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
andvue.config.json
so it creates and temporaryhot
file whenyarn serve
is started and also doesn't overwrite your index.php and creates your js files without version hashes when you useyarn build
. because we have linked them above directly without these hashed. thehot
file modus operanti I got fromlaravel-mix
as a way to figure out if we are usingyarn serve
oryarn 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
andyarn build
with a "classical" laravel blade setup.
关于laravel - 在 Laravel 中使用 VueJs 构建工具,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45904787/