avi*_*tor 2 laravel single-page-application vue.js
我试图找出如何在DigitalOcean上在Ubuntu上部署带有Laravel后端的Vue SPA
我目前能够在Digital Ocean上部署Laravel应用程序,完全没有问题.我的新挑战是我使用Vue-Webpack模板创建SPA并使用独立的Laravel应用程序作为后端.
我不知道如何部署它并在Ubuntu上构建我的文件夹.
一种方法是将项目保存在/ 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并将此路径指向由后端应用程序呈现的视图文件,例如适用于Rails应用程序的app/views/layouts/application.html.erb,或者资源/ views/index.blade.php用于Laravel应用程序.
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.
祝好运
我假设您的项目有两个文件夹：
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 模板指南 中所述。
| 归档时间： |
|
| 查看次数： |
5844 次 |
| 最近记录： |