脚本宝典收集整理的这篇文章主要介绍了Egg + Vue 服务端渲染开发指南,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
npm install easywebpack-cli -g
命令行,然后就可以使用 easywebpack
或 easy
命令easywebpack init
npm install
git clone https://github.com/hubcarl/egg-vue-webpack-boilerplate.git
npm install
初始化的项目提供多页面和SPA(vue-router/axios)服务端渲染实例,可以直接运行。
npm start
npm start 做了如下三件事情
npm run build 或 easywebpack build prod
app/view
目录public
目录buildConfig.json
和 manifest.json
放到 config
目录启动应用前, 请设置 EGG_SERVER_ENV
环境变量,测试环境设置 test
, 正式环境设置 prod
npm start
easywebpack-cli
统一构建,支持 dev,test,prod 模式构建easywebpack-cli
通过项目根目录下的 webpack.config.js
配置文件构造出 Webpack 实际的配置文件,配置项请见 webpack.config.js
webpackConfigList.length
启动对应个数的 Webpack 编译实例,这里会同时启动两个 Webpack 构建服务, 客户端jsbundle构建,端口9000, 服务端jsbundle构建端口9001。默认端口为9000, 端口依次递增。// config/config.local.js 本地 npm start 使用
const EasyWebpack = require('easywebpack-vue');
exports.webpack = {
webpackConfigList:EasyWebpack.getWebpackConfig()
};
app/web/page
目录中所有 .vue 文件当作 Webpack 构建入口是采用 app/web/framework/vue/entry 的 client-loader.js 和 server-loader.js 模板实现的,这个需要结合 webpack.config.js
下的 entry.loader 使用。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文件构建规范时使用。
webpack.config.js
entry.exclude 排除 vue文件。
支持多页面/单页面服务端渲染, 前端渲染, 静态页面三种方式.
在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>
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);
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);
webpack.config.js
配置和 app/web/page/html
代码实现egg-static
静态文件访问HTML文件在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
});
exports.index = function* (ctx) {
yield ctx.render('app/app.js', { url: this.url.replace(//app/, '') });
};
app.get('/app(/.+)?', app.controller.app.app.index);
EGG_SERVER_ENV=prod
环境变量, 更多请见运行环境
app/view
目录, public
目录以及 buildConfig.json
和 manifest.json
等文件, 都是 gitignore
的,部署时请注意把这些文件打包进去。以上是脚本宝典为你收集整理的Egg + Vue 服务端渲染开发指南全部内容,希望文章能够帮你解决Egg + Vue 服务端渲染开发指南所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。