Last active
June 8, 2021 07:54
-
-
Save 1isten/6d01e70e52f6d04a6438a191cb2b0646 to your computer and use it in GitHub Desktop.
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
lite version |
if history
mode is enabled, edit the base
option in router.js
according to the previous Laravel route path settings
export default new Router({
mode: 'history',
- base: process.env.BASE_URL,
+ base: '/frontend/',
routes: [
...
],
});
process.env.BASE_URL
corresponds to the publicPath
option in vue.config.js
, but we don't use this value here because we won't modify the publicPath
, instead we leave it with default value '/'
. Because if we set publicPath
to '/frontend/'
Laravel would not able to serve the route when using php artisan serve
and add a universal fallback in web.php
Route::get('/frontend/{any}', function () {
return view('frontend');
})->where(['any' => '.*']);
💡remember to edit .gitignore
the for Laravel project to ignore compiled files
+ /public/assets
+ /resources/views/frontend.blade.php
Nuxt inside Laravel
basically, generate nuxt static dist
into laravel and serve the dist
like another public
folder.
// frontend/package.json
{
"scripts": {
// ...
"pregenerate:laravel": "rm -rf node_modules/.cache .nuxt dist ../backend/dist",
"generate:laravel": "BASE_URL=/ BASE_DIR=/prefix/ PUBLIC_PATH=/ nuxt generate",
"postgenerate:laravel": "mv -fv dist ../backend/dist"
}
}
// frontend/nuxt.config.js
export default {
// ...
axios: {
baseURL: process.env.BASE_URL || '/',
},
router: {
base: process.env.BASE_DIR || '/',
},
build: {
publicPath: process.env.PUBLIC_PATH || '/_nuxt/',
},
generate: {
fallback: true,
},
// ...
};
// backend/routes/web.php
// ...
Route::get('/', 'HomeController@serveStatic');
Route::fallback('HomeController@serveStatic');
// backend/app/Http/Controllers/HomeController.php
use Illuminate\Http\Testing\MimeType;
// ...
class HomeController extends Controller
{
public function serveStatic(Request $request)
{
$base = 'prefix'; // or ''
$dist = 'dist';
$path = base_path(($base ? $dist : "$dist/") . str_replace($base, '', $request->path()));
$path = is_dir($path) ? "$path/index.html" : $path;
return file_exists($path) ? response()->file($path, ['Content-Type' => MimeType::from($path)]) : abort(404);
}
}
may reference: https://github.com/cretueusebiu/laravel-nuxt
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
inside the Laravel project folder, create a new Vue app
create
frontend/vue.config.js
to config the build optionsassetsDir
(assets/frontend) is not the same as Laravel route path, otherwise Laravel would not able to serve the route when usingphp artisan serve
modify
build
script infrontend/package.json
config Laravel route
routes/web.php
to resolve related viewfinally
cd frontend rm -rf .git cp ../public/favicon.ico public/favicon.ico npm run build npm run serve