在某些要求响应速度的场景里，你可能需要SSR，这样能够更快的加载。简而言之，用性能换时间。那么怎么样开始做你的第一个SSR项目呢
为什么是Nuxt
如果你之前对SSR有研究，那么你可能已经搭好了一个架子，那么这篇文章就不需要阅读了。
选择nuxt的原因很简单，这是vue官方维护的，也就是说只要vue还在，nuxt就在。更不要说nuxt的功能非常强大。
第一步：准备环境
不知道为什么我执行npx总是失败，因此建议使用yarn或者迂回一下。
// 使用yarn就是这样，很简单
yarn create nuxt-app <项目名>
// 使用 npm时
npm i create-nuxt-app -g
//待安装完成后
create-nuxt-app <项目名>
第二步：环境目录及相关用途
|-- app
|-- .eslintignore
|-- .eslintrc.js
|-- .gitignore
|-- app.html //渲染模板，类似与public/index.html，需要你自己创建
|-- jsconfig.json
|-- nuxt.config.js //nuxt配置文件
|-- package-lock.json
|-- package.json
|-- .nuxt
|-- assets // 资源文件，类似与vue-cli
| |-- css
| |-- images
|-- components //组件
|-- layouts //布局文件
| |-- default.vue
|-- middleware //中间件
|-- pages //页面
|-- plugins //插件
|-- server // ssr的web服务,创建时可以选择
| |-- index.js
|-- static //静态文件
|-- store //vuex目录，重要
我捡几个比较重要的说，
- plugins
这个文件夹放的是插件，其实就是在页面刚开始渲染时，此时可以访问window对象，对于一些需要用的window对象，document对象的库，需要在这里初始化。
- store
vuex的目录，因为ssr其实相当于一个多页面应用,其中的数据交互除了使用query string之外，主要还是使用vuex
- static
static就是相当于vue-cli里的public文件，注意引用的时候也以static文件夹内层级为主
第三步：正式开始
然后就是可以正式开始上手你的ssr项目了。
- 无需配置router
nuxt采取的是约定式路由，无需在新建一个router.js，在里面配置路由，所有路由都会根据pages文件夹内的文件生成。具体规则参考官网 zh.nuxtjs.org/guide/routi…
- 请求数据
在csr我们一般请求数据都会放到mounted里，但是在ssr中，我们可以更加提前的获取数据，在页面加载之前就可以。nuxt中提供了asyncData方法,记得要return出去，这里值会跟data合并，直接在组件中使用
async asyncData({isDev, route, store, env, params, query, req, res, redirect, error}) {
// store是vuex
// query是网址参数
const res = await axios('http://xxx.xxx')
return res
}
- lifeCycle的变化
在ssr中是不建议使用beforeCreate,和created的，因为这两个周期其实页面还未完全加载，无法使用vue的api,但是可以根据process.client来判断是否在游览器中，然后执行一些操作，否则是无法访问window对象的，建议少用，可以用plugins替代。
created(){
if(process.client){
//执行一些操作
}
}
因此在nuxt中，常用的就是asyncData，mounted
- 开发命令注意事项
nuxt的运行有2个命令，npm run dev ,npm start.第一个相当于本地开发，NODE_ENV是development,第二个也是本地，但是没有hotReload,NODE_ENV是production，所以你每次start 必须先运行npm run build,要不然你跑的还是之前的代码
打包命令也有2个，npm run build 和 npm run generate,前者打包的应用是ssr，后者打包出来时静态的，相当于之前的vue-cli。
其他的其实和普通的vue差不多，建议先把文档看一遍，其实并不难。
第四步：部署
当你使用npm run build之后，打包出来的其实是一个nodejs服务，而不再是静态文件，因此部署就比较麻烦，不能直接拷贝一下文件就好了。 在这里我推荐使用docker部署。
- 1、本地安装pm2
PM2是一个进程管理工具，可以帮你自动重启进程，防止服务崩溃，安装也很简单，npm i pm2 -g
- 2、生成配置文件
在项目目录下执行，pm2 init，就会生成一个ecosystem.config.js文件，这个是pm2的配置文件，你需要修改如下字段
module.exports = {
apps : [{
name: 'web_baseline', // app名字
script: 'npm start', // app 执行的命令
// Options reference: https://pm2.io/doc/en/runtime/reference/ecosystem-file/
args: 'one two',
instances: 1,
autorestart: true,
watch: false,
max_memory_restart: '1G',
//NODE_ENV都改为production
env: {
NODE_ENV: 'production'
},
env_production: {
NODE_ENV: 'production'
}
}]
}
- 3、docker配置文件
这里需要注意几点，基础镜像我选择使用pm2的官方node镜像，这样可以直接使用pm2.
国内环境下使用淘宝源比较快，如果你是部署在国外，建议删去这句RUN npm config set registry https://registry.npm.taobao.org --global
FROM keymetrics/pm2:latest-alpine
ENV NODE_ENV=production
ENV HOST 0.0.0.0
WORKDIR /usr/src/app
COPY . .
ENV NPM_CONFIG_LOGLEVEL warn
RUN npm config set registry https://registry.npm.taobao.org --global
RUN npm install nodemon cross-env -g
RUN npm install
RUN npm run build
EXPOSE 3000
CMD [ "pm2-runtime", "start", "ecosystem.config.js" ]
- 4、访问服务
docker 生成完，启动后，访问的却是本地的ip+port。如果你装了nginx，还需要反向代理一下才能够通过域名访问。
