Question

我想知道如何在DigitalOcean上的Ubuntu上部署带有Laravel后端的Vue SPA

我目前能够在Digital Ocean上部署Laravel应用程序，完全没有问题。我的新挑战是我使用Vue-Webpack模板创建SPA并使用独立的Laravel应用程序作为后端。

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

Answer 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 for a   用于Laravel应用程序的Rails应用程序或resources / views / index.blade.php。

<强> build.assetsRoot

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

这应该指向包含所有静态的根目录   您应用的资产。例如，public / for Rails / Laravel。

您应该做的是通过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。

祝你好运

Answer 2

我假设您的项目有两个文件夹：{vid.js代码进入的client和后端代码所在的server。

简短回答

只需将SPA构建文件（默认情况下位于client/dist文件夹中）复制到server/public文件夹中并进行部署（对于Node.js表达同样的情况）。

但你可以做得更好

当然，您希望避免在每次构建时将静态文件从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。

中所述的推荐方式

Answer 3

签出我的新项目Laravue-SPA。这是一个将Laravel，Vue.js和Vuetify组合在一起以创建单个页面应用程序的框架。

这是全新的并且仍为Alpha之前的版本，但是我很乐意提供支持并修复发现的错误！

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

使用Laravel后端部署Vue SPA

3 个答案: