乐趣区

vue服务器端渲染详解和案例

jiezi

@TOC

前言

单页面利用，为何须要服务器端渲染？首先依据你我的项目的状况，在我的项目最求极致的首屏加载速度时，在我的项目对 seo 有强烈需要时，在我的项目谋求高体验度时。

一. 须要筹备的环境

  1. 一台 nginx 云服务器（举荐云服务器）。
  2. 在云服务器上安装 node 环境。
  3. vue 全家桶（vue-cli、vue-router、vuex、axios）。
  4. 本地也要搭建好环境。

二. 注意事项

不可用 window 对象，和 document 对象，这里会具体表现为找不到对象。不要在 created 生命周期里调用接口，要在 mounted 里调用。

三. 配置 node 命令

` ” “scripts”: {

"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"build:client": "vue-cli-service build",
"build:server": "cross-env NODE_ENV=production WEBPACK_TARGET=node vue-cli-service build",
"build:win": "npm run build:server && move dist\\vue-ssr-server-bundle.json bundle && npm run build:client && move bundle dist\\vue-ssr-server-bundle.json && cross-env WEBPACK_TARGET=node NODE_ENV=production node ./server/ssr.js",
"build:mac": "npm run build:server && mv dist/vue-ssr-server-bundle.json bundle && npm run build:client && mv bundle dist/vue-ssr-server-bundle.json",
"start": "cross-env NODE_ENV=production node ./server/ssr.js",
"lint": "vue-cli-service lint",
"dev:serve": "cross-env WEBPACK_TARGET=node node ./server/ssr.js",
"dev": "concurrently \"npm run serve\"\"npm run dev:serve\" "

},`

四. 要用内部跳转请这样写



六. 装置 forever 依赖，这样能够保障终端敞开了，服务器的 node 服务还在

。

七、路由尽量用 history 模式

路由要这样写，不能先 import 进来！！

 {
  path: '/',
  name: 'index',
   component:  () => import(/* webpackChunkName: "home" */ './views/www-index/www-index.vue')
 },

退出移动版