Nuxt.js之SSR初体验

作者: Lynan 分类: HTML,CSS,Vue.js 发布时间: 2018-03-15 17:27

Why Nuxt.js?

最近突发奇想想要自己写一个VPS的控制面板,服务商已提供API,用ElementUI制作了一个简易版,但是很快就发现问题,这个API在请求时传递了我的ID以及我的Private Key,那么如果使用SPA模式的话,任何人都可以通过ajax请求得到的ID和Key,那么我的VPS就岌岌可危了。使用SSR(Server Side Rendering)的话,用户访问这个页面时,得到的是已经渲染好的一个HTML,用户在浏览器中不会发现有API请求,那么目的就达到了。

现在来看一下Nuxt的项目结构:


Nuxt.js 集成了以下组件/框架,用于开发完整而强大的 Web 应用:

项目的初始化在文档中都有详细说明,鉴于我也是初次使用Nuxt.js进行项目的构建,不多(会)描述。

重点来了,把项目部署到服务器上:

官网的部署介绍:(这…)
部署 Nuxt.js 服务端渲染的应用不能直接使用 nuxt 命令,而应该先进行编译构建,然后再启动 Nuxt 服务,可通过以下两个命令来完成:

nuxt build
nuxt start

推荐的 package.json 配置如下:

{
  "name": "my-app",
  "dependencies": {
    "nuxt": "latest"
  },
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start"
  }
}

燃鹅,我是这样部署的:

  1. npm run build
  2. 把.nuxt文件夹, package.json上传到服务器中(记得你的目标路径)
  3. 命令行进入服务器目标路径,npm i --production
  4. npm start
  5. forever start -c "npm start" ./(使用forever 运行npm start保持后台运行,此步骤与上步只需执行一个

然后在浏览器中输入

http://你的服务器ip:端口号

  例如

http://192.168.1.1:3000

如果上述步骤都没有出现问题你的SSR页面就会出现在浏览器中了。检查网页源代码,惊喜的发现数据都是已经渲染在DOM中的了。
使用nginx反代理可以自定义页面路径访问nodejs应用。参考我的另一篇文章设置nginx反向代理

发表评论

电子邮件地址不会被公开。 必填项已用*标注