search

easy-team / egg-vue-webpack-boilerplate

Egg Vue Server Side Render (SSR) / Client Side Render (CSR)
https://easyjs.cn/egg-vue
MIT License
1.36k stars 248 forks source link

如果有的页面不想让vue-ssr渲染，该怎么样配置呢？ #1

Closed gzlock closed 7 years ago

gzlock commented 7 years ago

例如用户的注册、登录、设置三个页面

hubcarl commented 7 years ago

这些页面怎么展示？ 用vue前端渲染？还是说纯粹的静态页面？

gzlock commented 7 years ago

@hubcarl 服务器渲染页面无非是为了seo，但有些页面没有seo需求，可以用vue前端渲染，免得占用服务器资源 话说，昨晚发现了nuxt就转为学习nuxt了，nuxt可以使用nuxt.render做egg controller最后的页面渲染

hubcarl commented 7 years ago

好，服务器渲染最重要的是为了首屏的速度，其次是seo, 前端渲染支持也很简单，webpack编译就可以解决，后面我集成进来。目前这个框架骨架是基于实际的项目提炼出来的，不仅仅是服务器渲染，主要包括一下几个特性：

  1. 完整的开发体验（server/client 代码修改实时webpack编译，UI界面自动刷新), 通过简单的npm start 命令即可完成, 实时编译和热更新是集成到插件里面的，使用者不用关心。不用手动先编译或者修改代码再编译，再运行。
  2. 极大简化webpack配置，支持自定义；同时基于egg-webpack, easywebpack插件可以很方便的扩展vue，react解决方案。
  3. 内置基于LRU 算法view缓存
  4. 规范的单页面／多页面ssr开发约束，可以直接用于实际项目开发。

其实在vue，react这种服务器渲染实现，最繁琐的是webpack工程构建搭建（本地开发，测试环境，正式环境，CDN等），保证友好的开发体验和效率以及 render层的缓存优化。这些共性的东西已经分离出egg-webpack, egg-webpack-vue, egg-view-vue, egg-view-vue-ssr 给抽象出来了，开发者无需关心这些。

hubcarl commented 7 years ago

方案一

目前这里实现前端渲染举例是纯粹的webpack编译成html文件，数据通过ajax获取，例子里面是编译到public目录，这样egg项目启动后， 线上应用就可以通过http://{domain}/public/html/index/index.html 形式访问。 本地开发时，如果是通过npm start启动的，因文件是编译到内存里面，所以是单独启动的webpack server(http://127.0.0.1:9003)服务，访问时通过 http://127.0.0.1:9003/public/html/index/index.html. 当然运行 npm run start-prod 这样就是直接读取本地文件。

方案二

页面访问时，数据请求这一块可以通过服务端(node/java)层先获取好，然后把window.__INITIAL_STATE__=业务数据 注入到页面中去，然后vue 初始化获取window.__INITIAL_STATE__

更多信息请看， https://github.com/hubcarl/egg-vue-webpack-boilerplate 的readme的配置说明部分。

tosim commented 7 years ago

使用 npm run build-dev 编译后，public目录里面没有html文件夹啊，再npm run start-prod也访问不到html

gzlock commented 7 years ago

@tosim webpack在dev状态下html文件是放入内存文件系统的吧，只有最后prod才会真正的输出html文件到指定的目录

tosim commented 7 years ago

@gzlock npm run build-prod也没有生成

yanxileo commented 7 years ago

@tosim 使用 npm run build-prod 对应的 npm run start-prod ，应该不是生成相应的 html 文件，而是使用一个 html 文件作为模板，生成 eggjs 下面对应的 view 文件，最后 Render 出来的，你再试试？

hubcarl commented 7 years ago

@tosim 你是mac系统还是 windows ？

tosim commented 7 years ago

@hubcarl 我是ubuntu系统

hubcarl commented 7 years ago

npm start 整个项目能跑起来嘛？

tosim commented 7 years ago

可以的

hubcarl commented 7 years ago

我先调试一下，运行 npm run html 可以前端渲染，你试一下，因为数据我是调用ajax接口服务的，例子是调用不通的，你可以改成你自己的数据服务

tosim commented 7 years ago

好的，我试试，谢谢

hubcarl commented 7 years ago

@tosim 我刚调整了一下package.json编译脚本，请更新一下代码，如果 node_modules 是昨天装的删掉，重新装一下

如果想单独编译文件到磁盘： npm run build-prod

另外本地开发模式和本地跑线上模式切换时，请先删除config/buildConfig.json 文件， 要不然会出现js，css链接找不到，后面我做一下自动清除功能。

tosim commented 7 years ago

好的，我更新一下，谢谢 @hubcarl

hubcarl commented 7 years ago

支持同时构建前端和后端渲染，后端和前端ip地址不用分开访问，npm start 后 可以直接http://127.0.0.1:7001/public/client/html/index/index.html ，详细请见 develop分支 build/config.js 配置，简化了配置。

最新html前端渲染支持：

 entry: { // 服务端渲染
    include: 'app/web/page',
    exclude: ['app/web/page/test']
  },
  html: {  // 生成前端渲染html页面
    template: 'app/web/view/layout.html',
    buildDir: 'html',
    include: 'app/web/html',
    exclude: []
  },
ZQun commented 7 years ago

@hubcarl 新的特性要0.7.0版本才有吧？ 大概什么时候发布

JakeWoki commented 5 years ago

@gzlock @hubcarl 怎么用nuxt怎么渲染？小白求助