使用 Laravel 后端部署 Vue SPA

Posted 2023-02-22

技术标签:

【中文标题】使用 Laravel 后端部署 Vue SPA【英文标题】：Deploy Vue SPA with Laravel Backend 【发布时间】：2018-03-20 15:39:04 【问题描述】：

我正在尝试弄清楚如何在 DigitalOcean 上的 Ubuntu 上部署带有 Laravel 后端的 Vue SPA

我目前可以毫无问题地在 Digital Ocean 上部署 Laravel 应用程序。我的新挑战是我正在使用 Vue-Webpack 模板创建一个 SPA，并使用独立的 Laravel 应用程序作为后端。

我不确定如何在 Ubuntu 上部署它并构建我的文件夹。

【问题讨论】：

您使用什么来提供应用程序？ laravel，另一个 php 应用程序，nodejs 等？后端是laravel，前端是用vue-cli制作的你的应用索引文件是什么？索引来自 Vue 项目。 Laravel 只是 API。我更新了答案 【参考方案1】：

一种方法是将 /var/www/ 中的项目并排保存在两个文件夹中（laravel-api 和 vue-app）。另一种方法是将您的应用程序内容放在 laravel-app 的资源文件夹中。配置 nginx 或 apache 只为 laravel api 后端服务。

见http://vuejs-templates.github.io/webpack/backend.html

更新config/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:

来自文档

build.index

必须是本地文件系统上的绝对路径。

这是 index.html（带有注入的资产 URL）的位置生成。

如果您将此模板与后端框架一起使用，您可以编辑 index.html 并将此路径指向由您的后端应用程序，例如app/views/layouts/application.html.erb 用于 Rails 应用，或 Laravel 应用的 resources/views/index.blade.php。

build.assetsRoot

必须是本地文件系统上的绝对路径。

这应该指向包含所有静态文件的根目录您的应用程序的资产。例如，对于 Rails/Laravel 都使用 public/。

你应该做的是通过 Laravel 路由或其他一些服务方法来提供你的主索引文件。假设你有 home.blade.php 作为索引文件

1 - 显示应用程序入口点

routes.php / web.php

Route::get('/', function() 
    return view('home');
);

这个索引文件应该包含 app 元素。那么你应该使用 vue-router 进行导航，它会在索引 url 之后添加 # 。

这里是如何配置 javacript 部分

2 - 安装并导入 VueRouter 到 /resources/assets/js/bootstrap.js

3 - 将 Vue 路由器与 Vue 一起使用 (Vue.use(VueRouter);)

bootstrap.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 - 创建 /resources/assets/js/routes.js 文件

5 - 导入 vue 路由器

6 - 定义路线

7 - 出口路线

routes.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 - 创建 /resources/assets/js/ app.js 文件，这将是 javascript 主应用程序

9- 需要我们创建的 bootstrap.js 和 Import routes.js 文件

10 - 使用它设置路由器：路由器（因为我们使用的是 ES6，所以下面定义的路由器将被视为路由器：路由器）

11 - 那是新的 Vue 应用程序

app.js

require('./bootstrap');

import router from './routes';


new Vue(
    el: '#app',
    router
    //app works go here
);

12 - 在 home.blade.php 中使用 app.js

13 - 添加路由器链接

14 - 添加路由器视图

home.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 - 记得运行 webpack。

祝你好运

【讨论】：

tnx @aimme 为您的回复。我认为我没有明确说明我的挑战是什么。我可以毫无问题地设置 Laravel 应用程序和 Vue。我需要帮助的是在 DigitalOcean 上的 Ubuntu droplet 上部署这两个项目。【参考方案2】：

我假设您的项目有两个文件夹：client 存放您的 vue.js 代码，server 存放您的后端代码。

简短回答

只需将 SPA 构建文件（默认位于 client/dist 文件夹中）复制到您的 server/public 文件夹中并部署它（对于 Node.js 的 express 也是如此）。

但你可以做得更好

您当然希望避免在每次构建时手动将静态文件从client/dist 复制到server/public。这很简单，您只需更改 client/config/index.js 中的构建文件夹，并将其设置为 server/public，而不是默认的 client/dist。

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'),

这是webpack template guide 中所述的推荐方法。

【讨论】：

这是我正在寻找的描述。感谢您的这篇文章！好的，假设我已将 dist 内容复制到 laravel 的 project/public 并且我的服务器指向 API 应用程序入口点，如何让它显示前端，我可以将我的服务器指向 api或水疗中心 Abdelaziz Mokhnache ，我有使用 Laravel 7 + Vue 开发的 SPA。它没有单独的文件夹结构。所有 Vue 文件都位于 resource/js 文件夹中。如何将我的项目部署到共享主机中？ ***.com/questions/63361441/…【参考方案3】：

查看我的新项目Laravue-SPA。它是一个框架，将 Laravel、Vue.js 和 Vuetify 结合在一起以创建一个单页应用程序。

它是全新的，仍然是 alpha 版本，但我很乐意提供支持并修复发现的错误！

此外，即使您朝着自己的方向发展，它也会向您介绍创建 SPA 所需的概念。

【讨论】：

以上是关于使用 Laravel 后端部署 Vue SPA的主要内容，如果未能解决你的问题，请参考以下文章

如何在 google firebase 上托管我的 laravel 项目

使用 Ngrok 公开 Nuxt/vue 前端和 laravel 后端本地环境

使用 Laravel 作为后端刷新 Vue.js SPA 的身份验证令牌

Laravel 后端、Vue 前端、api 最佳实践？

如何在 Vue.js 中显示错误数组？使用 Laravel 进行后端验证

将 VueJS 与 laravel 连接起来