实例PK(Vue服务端渲染 VS Vue浏览器端渲染)

npm install -g vue-cli
vue init webpack doubanMovie
cd doubanMovie
npm install
npm run dev

import Vue from ‘vue‘
import Router from ‘vue-router‘
import Moving from ‘@/components/moving‘
import Upcoming from ‘@/components/upcoming‘
import Top250 from ‘@/components/top250‘
import MoviesDetail from ‘@/components/common/moviesDetail‘

import Search from ‘@/components/searchList‘

Vue.use(Router)
/**
 * 路由信息配置
 */
export default new Router({
  routes: [
    {
      path: ‘/‘,
      name: ‘Moving‘,
      component: Moving
    },
    {
      path: ‘/upcoming‘,
      name: ‘upcoming‘,
      component: Upcoming
    },
    {
      path: ‘/top250‘,
      name: ‘Top250‘,
      component: Top250
    },
    {
      path: ‘/search‘,
      name: ‘Search‘,
      component: Search
    },
    {
      path: ‘/moviesDetail‘,
      name: ‘moviesDetail‘,
      component: MoviesDetail
    }

  ]
})

<keep-alive exclude="moviesDetail">
   <router-view></router-view>
</keep-alive>

├── index.html
├── main.js
├── api
│   └── ... # 抽取出API请求
├── components
│   ├── App.vue
│   └── ...
└── store
    ├── index.js          # 我们组装模块并导出 store 的地方
    └── moving            # 电影模块
        ├── index.js      # 模块内组装，并导出模块的地方
        ├── actions.js    # 模块基本 action
        ├── getters.js    # 模块级别 getters
        ├── mutations.js  # 模块级别 mutations
        └── types.js      # 模块级别 types

import store from ‘./store‘
new Vue({
  el: ‘#app‘,
  router,
  store,
  template: ‘<App/>‘,
  components: { App }
})

            proxyTable: {
      ‘/api‘: {
        target: ‘http://api.douban.com/v2‘,
        changeOrigin: true,
        pathRewrite: {
          ‘^/api‘: ‘‘
        }
      }
    }

localhost:8080/api/movie

http://api.douban.com/v2/movie

const port = process.env.PORT || 8080
app.listen(port, () => {
  console.log(`server started at localhost:${port}`)
})

app.get(‘*‘, (req, res) => {
  if (!renderer) {
    return res.end(‘waiting for compilation... refresh in a moment.‘)
  }

  const s = Date.now()

  res.setHeader("Content-Type", "text/html")
  res.setHeader("Server", serverInfo)

  const errorHandler = err => {
    if (err && err.code === 404) {
      res.status(404).end(‘404 | Page Not Found‘)
    } else {
      // Render Error Page or Redirect
      res.status(500).end(‘500 | Internal Server Error‘)
      console.error(`error during render : ${req.url}`)
      console.error(err)
    }
  }

  renderer.renderToStream({ url: req.url })
    .on(‘error‘, errorHandler)
    .on(‘end‘, () => console.log(`whole request: ${Date.now() - s}ms`))
    .pipe(res)
})

const proxy = require(‘http-proxy-middleware‘);//引入代理中间件
/**
 * proxy middleware options
 * 代理跨域配置
 * @type {{target: string, changeOrigin: boolean, pathRewrite: {^/api: string}}}
 */var options = {
  target: ‘http://api.douban.com/v2‘, // target host
  changeOrigin: true,               // needed for virtual hosted sites  pathRewrite: {
    ‘^/api‘: ‘‘
  }
};

var exampleProxy = proxy(options);
app.use(‘/api‘, exampleProxy);

import ‘es6-promise/auto‘
import { app, store, router } from ‘./app‘

// prime the store with server-initialized state.
// the state is determined during SSR and inlined in the page markup.if (window.__INITIAL_STATE__) {
  store.replaceState(window.__INITIAL_STATE__)
}

/**
 * 异步组件
 */
router.onReady(() => {
  // 开始挂载到dom上
  app.$mount(‘#app‘)
})

// service workerif (process.env.NODE_ENV === ‘production‘ && ‘serviceWorker‘ in navigator) {
  navigator.serviceWorker.register(‘/service-worker.js‘)
}

import { app, router, store } from ‘./app‘

const isDev = process.env.NODE_ENV !== ‘production‘

// This exported function will be called by `bundleRenderer`.
// This is where we perform data-prefetching to determine the
// state of our application before actually rendering it.
// Since data fetching is async, this function is expected to
// return a Promise that resolves to the app instance.
export default context => {
  const s = isDev && Date.now()

  returnnew Promise((resolve, reject) => {
    // set router‘s location    router.push(context.url)

    // wait until router has resolved possible async hooks
    router.onReady(() => {
      const matchedComponents = router.getMatchedComponents()
      // no matched routesif (!matchedComponents.length) {
        reject({ code: 404 })
      }
      // Call preFetch hooks on components matched by the route.// A preFetch hook dispatches a store action and returns a Promise,// which is resolved when the action is complete and store state has been// updated.
      Promise.all(matchedComponents.map(component => {
        return component.preFetch && component.preFetch(store)
      })).then(() => {
        isDev && console.log(`data pre-fetch: ${Date.now() - s}ms`)
        // After all preFetch hooks are resolved, our store is now// filled with the state needed to render the app.// Expose the state on the render context, and let the request handler// inline the state in the HTML response. This allows the client-side// store to pick-up the server-side state without having to duplicate// the initial data fetching on the client.
        context.state = store.state
        resolve(app)
      }).catch(reject)
    })
  })
}

context.state = store.state

import Vue from ‘vue‘
import App from ‘./App.vue‘
import store from ‘./store‘
import router from ‘./router‘
import { sync } from ‘vuex-router-sync‘
import Element from ‘element-ui‘
Vue.use(Element)

// sync the router with the vuex store.
// this registers `store.state.route`sync(store, router)

/**
 * 创建vue实例
 * 在这里注入 router  store 到所有的子组件
 * 这样就可以在任何地方使用 `this.$router` and `this.$store`
 * @type {Vue$2}
 */
const app = new Vue({
  router,
  store,
  render: h => h(App)
})

/**
 * 导出 router and store.
 * 在这里不需要挂载到app上。这里和浏览器渲染不一样
 */
export { app, router, store }