Last active
May 11, 2020 13:34
-
-
Save ufhy/8c9c5cbbaa738379bbed307f55c5ce18 to your computer and use it in GitHub Desktop.
Setup Laravel with vue cli
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const ManifestPlugin = require('webpack-manifest-plugin'); | |
| const path = require('path'); | |
| module.exports = { | |
| outputDir: '../public/dist/', | |
| devServer: { | |
| port: 8080 | |
| }, | |
| configureWebpack: { | |
| resolve: { | |
| alias: { | |
| '@': path.join(__dirname, './src'), | |
| }, | |
| }, | |
| plugins: [ | |
| new ManifestPlugin({ | |
| fileName: '../vue-manifest.json', | |
| basePath: '/', | |
| publicPath: '/dist/', | |
| writeToFileEmit: true | |
| }) | |
| ], | |
| externals: { | |
| // "vue": "Vue", | |
| "moment": "moment", | |
| }, | |
| devServer: { | |
| disableHostCheck: true, | |
| headers: { 'Access-Control-Allow-Origin': '*' } | |
| } | |
| }, | |
| chainWebpack: config => { | |
| config.plugins.delete('prefetch') | |
| const fs = require('fs') | |
| const pathFile = '../public/hot' | |
| if (process.env.NODE_ENV !== 'production') { | |
| fs.writeFileSync(pathFile, 'http://localhost:8080') | |
| } else { | |
| if (fs.existsSync(pathFile)) { | |
| fs.unlinkSync(pathFile) | |
| } | |
| } | |
| }, | |
| css: { | |
| extract: true, | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| // app/Helpers | |
| namespace App\Helpers; | |
| use Illuminate\Support\HtmlString; | |
| use Illuminate\Support\Str; | |
| class VueCli | |
| { | |
| public static function asset($path, $manifestDirectory = '') | |
| { | |
| static $manifests = []; | |
| if (! Str::startsWith($path, '/')) { | |
| $path = "/{$path}"; | |
| } | |
| if ($manifestDirectory && ! Str::startsWith($manifestDirectory, '/')) { | |
| $manifestDirectory = "/{$manifestDirectory}"; | |
| } | |
| $manifestPath = public_path($manifestDirectory.'/vue-manifest.json'); | |
| if (! isset($manifests[$manifestPath])) { | |
| if (! file_exists($manifestPath)) { | |
| throw new \Exception('The vue cli manifest does not exist.'); | |
| } | |
| $manifests[$manifestPath] = json_decode(file_get_contents($manifestPath), true); | |
| } | |
| $manifest = $manifests[$manifestPath]; | |
| if (! isset($manifest[$path])) { | |
| $exception = new \Exception("Unable to locate Mix file: {$path}."); | |
| if (! app('config')->get('app.debug')) { | |
| report($exception); | |
| return $path; | |
| } else { | |
| throw $exception; | |
| } | |
| } | |
| if (file_exists(public_path($manifestDirectory.'/hot'))) { | |
| $url = rtrim(file_get_contents(public_path($manifestDirectory.'/hot'))); | |
| $assetFile = Str::replaceFirst('/dist', '', $manifest[$path]); | |
| return new HtmlString($url.$assetFile); | |
| } | |
| return new HtmlString($manifestDirectory.$manifest[$path]); | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <!-- CSRF Token --> | |
| <meta name="csrf-token" content="{{ csrf_token() }}"> | |
| <title>{{ config('app.name', 'Laravel') }}</title> | |
| <!-- if has css file --> | |
| <link href="{{ App\Helpers\VueCli::asset('chunk-vendors.css') }}" rel="stylesheet"> | |
| <link href="{{ App\Helpers\VueCli::asset('app.css') }}" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <div id="root"></div> | |
| <script src="{{ App\Helpers\VueCli::asset('app.js') }}"></script> | |
| <script src="{{ App\Helpers\VueCli::asset('chunk-vendors.js') }}"></script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment