使用 Laravel 后端部署 Vue SPA
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46646262/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Deploy Vue SPA with Laravel Backend
提问by aviattor
I am trying to figure out how I will deploy a Vue SPA with a Laravel backend on Ubuntu on DigitalOcean
我想弄清楚如何在 DigitalOcean 上的 Ubuntu 上部署带有 Laravel 后端的 Vue SPA
I am currently able to deploy Laravel apps on Digital Ocean with no problem at all. My new challenge is that I am creating an SPA with the Vue-Webpack template and using a standalone Laravel app as backend.
我目前可以毫无问题地在 Digital Ocean 上部署 Laravel 应用程序。我的新挑战是我正在使用 Vue-Webpack 模板创建 SPA，并使用独立的 Laravel 应用程序作为后端。
I am not sure how I will deploy this and structure my folders on Ubuntu.
我不确定我将如何部署它并在 Ubuntu 上构建我的文件夹。
回答by aimme
one way is to keep your projects in /var/www/ side by side in two folders(laravel-api and vue-app). another way is placing your app contents inside laravel-app's resources folder. configure nginx or apache to serve the laravel api backend only.
一种方法是将 /var/www/ 中的项目并排保存在两个文件夹（laravel-api 和 vue-app）中。另一种方法是将您的应用程序内容放在 laravel-app 的资源文件夹中。将 nginx 或 apache 配置为仅服务于 laravel api 后端。
see http://vuejs-templates.github.io/webpack/backend.html
见http://vuejs-templates.github.io/webpack/backend.html
update config/index.js
更新配置/index.js
var path = require('path')
module.exports = {
build: {
index: path.resolve(__dirname, 'dist/index.html'),
assetsRoot: path.resolve(__dirname, 'dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
productionSourceMap: true
},
dev: {
port: 8080,
proxyTable: {}
}
}
from the docs
从文档
build.index
Must be an absolute path on your local file system.
This is where the index.html (with injected asset URLs) will be generated.
If you are using this template with a backend-framework, you can edit index.html accordingly and point this path to a view file rendered by your backend app, e.g. app/views/layouts/application.html.erb for a Rails app, or resources/views/index.blade.php for a Laravel app.
build.assetsRoot
Must be an absolute path on your local file system.
This should point to the root directory that contains all the static assets for your app. For example, public/ for both Rails/Laravel.
构建索引
必须是本地文件系统上的绝对路径。
这是将生成 index.html（带有注入的资产 URL）的地方。
如果您将此模板与后端框架一起使用，您可以相应地编辑 index.html 并将此路径指向后端应用程序呈现的视图文件，例如 app/views/layouts/application.html.erb 用于 Rails 应用程序，或用于 Laravel 应用程序的 resources/views/index.blade.php。
build.assetsRoot
必须是本地文件系统上的绝对路径。
这应该指向包含应用程序所有静态资产的根目录。例如，Rails/Laravel 都使用 public/。
What you should do is serve your main index file through Laravel routes or some other method of serving. lets say you have home.blade.php as index file
您应该做的是通过 Laravel 路由或其他一些服务方法提供您的主索引文件。假设你有 home.blade.php 作为索引文件
1 - show application entry point
1 - 显示应用程序入口点
routes.php / web.php
路线.php / web.php
Route::get('/', function() {
return view('home');
});
this index file should contain the app element. then you should use vue-router for navigation which will add # after index url.
此索引文件应包含 app 元素。那么你应该使用 vue-router 进行导航，它将在索引 url 后添加 #。
Here is how to configure javacript part
这里是如何配置javacript部分
2 - Install and Import VueRouter to /resources/assets/js/bootstrap.js
2 - 安装并导入 VueRouter 到 /resources/assets/js/bootstrap.js
3 - Use Vue router with Vue ( Vue.use(VueRouter);)
3 - 使用 Vue 路由器和 Vue ( Vue.use(VueRouter);)
bootstrap.js
引导程序.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import axios from 'axios';
window.Vue = Vue;
Vue.use(VueRouter);
window.axios = axios;
window.axios.defaults.headers.common = {
'X-Requested-With': 'XMLHttpRequest'
};
4 - Create /resources/assets/js/routes.js file
4 - 创建 /resources/assets/js/routes.js 文件
5 - Import vue router
5 - 导入 vue 路由器
6 - define routes
6 - 定义路由
7 - Export routes
7 - 出口路线
routes.js
路由.js
import VueRouter from 'vue-router';
let routes = [
{
path: '/',
component: require('./views/Home')
},
{
path: '/another',
component: require('./views/Another')
}
];
export default new VueRouter({
routes
})
8 - Create /resources/assets/js/ app.js file which would be the javascript main app
8 - 创建 /resources/assets/js/ app.js 文件，这将是 javascript 主应用程序
9- require the bootstrap.js and Import routes.js file we created
9- 需要我们创建的 bootstrap.js 和 Import routes.js 文件
10 - Use it set router: router (as we are using ES6 just router as defined below would be considered as router:router)
10 - 使用它设置路由器：路由器（因为我们使用的是 ES6，所以下面定义的路由器将被视为路由器：路由器）
11 - Thats the new Vue app there
11 - 那就是新的 Vue 应用程序
app.js
应用程序.js
require('./bootstrap');
import router from './routes';
new Vue({
el: '#app',
router
//app works go here
});
12 - Use app.js in the home.blade.php
12 - 在 home.blade.php 中使用 app.js
13 - Add router links
13 - 添加路由器链接
14 - Add router view
14 - 添加路由器视图
home.blade.php
主页.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My App</title>
</head>
<body>
<div id="app">
<section class="section">
<div class="container">
<nav class="tabs is-boxed">
<div class="container">
<ul>
<router-link tag="li" to="/" exact>
<a>Home</a>
</router-link>
<router-link tag="li" to="/another">
<a>Another</a>
</router-link>
</ul>
</div>
</nav>
<router-view></router-view>
</div>
</section>
</div>
<script src="/js/app.js"></script>
</body>
</html>
15 - Remember to run webpack.
15 - 记得运行 webpack。
Good luck
祝你好运
回答by Abdelaziz Mokhnache
I am assuming you have two folders for your project:
clientwhere your vue.js code goes in, andserverwhere your backend code lives.
我假设您的项目有两个文件夹：
client您的 vue.js 代码所在的位置，以及server您的后端代码所在的位置。
The short answer
简短的回答
Just copy the SPA build files (located in client/distfolder by default) into your server/publicfolder and deploy it (The same thing is true with express for Node.js).
只需将 SPA 构建文件（client/dist默认位于文件夹中）复制到您的server/public文件夹中并部署它（Node.js 的 express 也是如此）。
But you can do it better
但你可以做得更好
Surely you want to avoid the manual work of copying static files from client/distto server/publicon every build you do. This is easy, all you need is just changing the build folder in your client/config/index.jsand make it your server/publicinstead of the default client/dist.
当然，你要避免复制静态文件的手工作业client/dist到server/public你做的每一个版本。这很简单，您所需要的只是更改您的构建文件夹client/config/index.js并将其设置为您的server/public而不是默认的client/dist.
client/config/index.js:
client/config/index.js:
build: {
// change "../dist" to "../../server/public" in both rules
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
}
This is the recommended way to do it as described in the webpack template guide.
这是推荐的方法，如webpack 模板指南 中所述。
回答by wheelmaker
Check out my new project Laravue-SPA. It's a framework that pulls together Laravel, Vue.js and Vuetify to create a single page application.
查看我的新项目Laravue-SPA。这是一个将 Laravel、Vue.js 和 Vuetify 结合在一起以创建单页应用程序的框架。
It's brand new and still pre alpha release but I'll be happy to provide support and fix bugs as they're discovered!
它是全新的，仍然是 alpha 版本，但我很乐意提供支持并修复发现的错误！
Plus it will introduce you to the concepts needed to create an SPA even if you go off in your own direction.
此外，即使您朝着自己的方向前进，它也会向您介绍创建 SPA 所需的概念。
