前端工程让前端飞Vue.js

Egg + Vue 服务端渲染开发指南

2017-10-26  本文已影响163人  hubcarl

1. 项目初始化

1.1 通过 easywebpack-cli 脚手架初始化

  1. 安装脚手架 npm install easywebpack-cli -g 命令行，然后就可以使用 easywebpack 或 easy 命令

  2. 命令行运行 easywebpack init

  3. 选择 egg+vue server side render boilerplate 初始化骨架项目

  4. 安装依赖 npm install

1.2 通过骨架项目初始化

git clone https://github.com/hubcarl/egg-vue-webpack-boilerplate.git
npm install

初始化的项目提供多页面和SPA(vue-router/axios)服务端渲染实例，可以直接运行。

2. 项目运行

2.1 本地运行

npm start

npm start 做了如下三件事情

2.2 发布模式

npm run build 或 easywebpack build prod
  1. 启动 Webpack 构建，文件落地磁盘
  2. 服务端构建的文件放到 app/view 目录
  3. 客户端构建的文件放到 public 目录
  4. 生成的 buildConfig.json 和 manifest.json 放到 config 目录
  5. 构建的文件都是gitignore的，部署时请注意把这些文件打包进去

启动应用前， 请设置 EGG_SERVER_ENV 环境变量，测试环境设置 test， 正式环境设置 prod

npm start

3. 项目构建

// config/config.local.js 本地 npm start 使用
const EasyWebpack = require('easywebpack-vue');
exports.webpack = {
  webpackConfigList:EasyWebpack.getWebpackConfig()
};

entry: {
   include: ['app/web/page', { 'app/app': 'app/web/page/app/app.js?loader=false' }],
   exclude: ['app/web/page/[a-z]+/component', 'app/web/page/app'],
   loader: { // 如果没有配置loader模板，默认使用 .js 文件作为构建入口
      client: 'app/web/framework/vue/entry/client-loader.js',
      server: 'app/web/framework/vue/entry/server-loader.js',
   }    
}

上面 { 'app/app': 'app/web/page/app/app.js?loader=false' } 这个 loader=false 的含义表示 app/web/page 目录下的 app/app.js 不使用 entry.loader 模板。因为这个app/app.js是一个SPA服务端渲染Example，实现逻辑与其他普通的页面不一样，不能用 entry.loader 模板， 这个功能在自定义entry文件构建规范时使用。

4. 项目规范

egg-vue-project.png

5. 项目开发

支持多页面/单页面服务端渲染, 前端渲染, 静态页面三种方式.

5.1 多页面服务端渲染实现

5.1.1 多页面前端页面实现

在app/web/page 目录下面创建home目录, home.vue 文件, Webpack自动根据.vue文件创建entry入口, 具体实现请见webpack.config.js

<template>
  <layout title="基于egg-vue-webpack-dev和egg-view-vue插件的工程示例项目" description="vue server side render" keywords="egg, vue, webpack, server side render">
   {{message}}
  </layout>
</template>
<style>
  @import "home.css";
</style>
<script type="text/babel">

  export default {
    components: {

    },
    computed: {

    },
    methods: {

    },
    mounted() {

    }
  }
</script>

5.1.2 多页面后端渲染实现, 通过 egg-view-vue-ssr 插件 render 方法实现

exports.index = function* (ctx) {
  yield ctx.render('home/home.js', { message: 'vue server side render!' });
};

app.get('/home', app.controller.home.home.index);

5.1.3 多页面走前端渲染(后端路由)实现, 通过 egg-view-vue-ssr 插件 renderClient 方法实现

exports.client = function* (ctx) {
  yield ctx.renderClient('home/home.js', { message: 'vue server side render!' });
};

app.get('/client', app.controller.home.home.client);

5.2 HTML静态页面前端渲染

5.3 单页面服务器渲染同构实现

5.3.1 单页面前端实现

在app/web/page 目录下面创建app目录, app.vue, app.js 文件.

<template>
  <app-layout>
    <transition name="fade" mode="out-in">
      <router-view></router-view>
    </transition>
  </app-layout>
</template>
<style lang="sass">

</style>
<script type="text/babel">
  export default {
    computed: {

    },
    mounted(){

    }
  }
</script>

import { sync } from 'vuex-router-sync';
import store from 'store/app';
import router from 'component/app/router';
import app from './app.vue';
import App from 'app';
import Layout from 'component/layout/app';

App.component(Layout.name, Layout);

sync(store, router);

export default App.init({
  base: '/app',
  ...app,
  router,
  store
});

5.3.2 单页面后端实现

exports.index = function* (ctx) {
  yield ctx.render('app/app.js', { url: this.url.replace(/\/app/, '') });
};

  app.get('/app(/.+)?', app.controller.app.app.index);

6. 项目部署

7. 项目和插件

上一篇 下一篇

猜你喜欢

热点阅读