将 Laravel 7 和 Vue SPA 应用程序部署到共享主机中 - IT屋-程序员软件开发技术分享社区
首页 前端开发 将 Laravel 7 和 Vue SPA 应用程序部署到共享主机中
将 Laravel 7 和 Vue SPA 应用程序部署到共享主机中
[英] Deploying Laravel 7 and Vue SPA application into shared hosting
本文介绍了将 Laravel 7 和 Vue SPA 应用程序部署到共享主机中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
专家，我的应用程序有 Vue 前端和 Laravel 7 后端.问题是，我无法重定向到登录页面，它向我显示了一个空白屏幕.所有 Vue 文件都位于 resource/js 文件夹中.前端和后端没有单独的文件夹.
网络标签
控制台日志
文件夹结构:
根目录有quickpack 文件夹 public_html 文件夹中有我的 Laravel 应用程序的 public 文件到目前为止我做了什么:
AppServiceProvider.php
公共函数boot(){$this->app->bind('path.public', function() {返回 base_path().'/../public_html/netlinkler/quickpack';});}app.js
require('./bootstrap');window.Vue = require('vue')从./store"导入商店从'./router'导入路由器从'view-design'导入ViewUI；导入 'view-design/dist/styles/iview.css';Vue.use(ViewUI);从'./common'导入common；Vue.mixin(common);Vue.component('mainapp', require('./components/mainapp.vue').default)const app = new Vue({el: '#hmp',路由器，店铺});welcome.blade.php
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}"><头><元字符集=utf-8"><元名称=视口"内容=宽度=设备宽度，初始比例=1"><title>交付应用</title><link rel="样式表";href={{asset('/css/all.css')}}"><身体><div id="hmp">@if(Auth::guard('employee')->check())<mainapp :user="{{Auth::guard('employee')->user()}}"></mainapp>@别的<mainapp :user="false"></mainapp>@万一
<script src="{{ mix('/js/app.js') }}"></html>EmployeeControler.php
公共函数索引(Request $request){if(!Auth::guard('employee')->check() && $request->path() != 'login'){返回重定向('/登录')；}if(!Auth::guard('employee')->check() && $request->path() == 'login'){返回视图('欢迎');}返回视图('欢迎');}web.php
Route::get('/', 'EmployeesController@index');身份验证::路由()；router.js
const 路由 = [{路径:'/家'，组成部分:家},{路径:'/登录'，组件:登录}]导出默认的新路由器({模式:历史"，baseurl: "/api/v1",基地:'deliverywebapp'，路线})
解决方案
您需要将您的应用程序文件夹添加到您的路由路径中
或者你可以添加一个基本路径
导出默认的新路由器({
模式:历史"，baseurl: "/api/v1",基地:'deliverywebapp'，const 路由 = [
<代码>{路径:'/家'，组成部分:家},{路径:'/登录'，组件:登录} ]
})
或
导出默认的新路由器({
模式:历史"，baseurl: "/api/v1",const 路由 = [
<代码>{路径:'/deliverywebapp/home',组成部分:家},{路径:'/deliverywebapp/login',组件:登录} ]
})
Experts,
My application has Vue front-end and Laravel 7 back-end. The issue was, I can't redirect to the login page and it shows me a blank screen. All the Vue files are residing in resource/js folder. There is no separate folder for front-end and back-end.
Network tab
console log
Folder structure:
root directory has quickpack folder
inside the public_html folder has the public files of my Laravel application
What I have done so far:
AppServiceProvider.php
public function boot()
{
$this->app->bind('path.public', function() {
return base_path().'/../public_html/netlinkler/quickpack';
});
}
app.js
require('./bootstrap');
window.Vue = require('vue')
import store from './store'
import router from './router'
import ViewUI from 'view-design';
import 'view-design/dist/styles/iview.css';
Vue.use(ViewUI);
import common from './common';
Vue.mixin(common);
Vue.component('mainapp', require('./components/mainapp.vue').default)
const app = new Vue({
el: '#hmp',
router,
store
});
welcome.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Delivery App</title>
<link rel="stylesheet" href="{{asset('/css/all.css')}}">
</head>
<body>
<div id="hmp">
@if(Auth::guard('employee')->check())
<mainapp :user="{{Auth::guard('employee')->user()}}"></mainapp>
@else
<mainapp :user="false"></mainapp>
@endif
</div>
</body>
<script src="{{ mix('/js/app.js') }}"> </script>
</html>
EmployeeControler.php
public function index(Request $request){
if(!Auth::guard('employee')->check() && $request->path() != 'login'){
return redirect('/login');
}
if(!Auth::guard('employee')->check() && $request->path() == 'login'){
return view('welcome');
}
return view('welcome');
}
web.php
Route::get('/', 'EmployeesController@index');
Auth::routes();
router.js
const routes = [
{
path: '/home',
component: home
},
{
path: '/login',
component: login
}
]
export default new Router({
mode: "history",
baseurl: "/api/v1",
base: 'deliverywebapp',
routes
})
解决方案
You need to add your application folder to your route path
Or you can add a base path
export default new Router({
mode: "history",
baseurl: "/api/v1",
base: 'deliverywebapp',
const routes = [
{
path: '/home',
component: home
},
{
path: '/login',
component: login
}
]
})
or
export default new Router({
mode: "history",
baseurl: "/api/v1",
const routes = [
{
path: '/deliverywebapp/home',
component: home
},
{
path: '/deliverywebapp/login',
component: login
}
]
})
这篇关于将 Laravel 7 和 Vue SPA 应用程序部署到共享主机中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
