雅荷心语博客首先,简单介绍一下, nuxt.js 是什么
Nuxt.js 是一个 Vue.js的SSR通用框架，最常用的就是用来作SSR（服务器端渲染）。
首先说下 SSR，最近很热的词，意为 Server Side Rendering（服务端渲染），目的是为了解决单页面应用的 SEO 优化 的问题，对于普通的一般网站影响不大，但是对于论坛类，内容类网站来说是致命的，在国内, 百度/搜狗/等等的搜索引擎无法抓取页面相关内容，也就是用户搜不到此网站的相关信息(谷歌可以抓取vue等框架信息)。这也就是我们使用 nuxt.js 的主要原因,
目前常见的SSR开源框架(方式)有三个:
- nuxt.js 官网从仓库: https://github.com/nuxt/nuxt.js
- vue 官方的SSR方式: https://ssr.vuejs.org/zh/
- vue-hackernews-2.0, https://github.com/vuejs/vue-hackernews-2.0
今天我们主要讲讲目前最成熟, 文档最详细, 拥有大量问题解决方案的nuxt.js
nuxt.js 优点:
- 基于 Vue.js
自动代码分层
服务端渲染
强大的路由功能，支持异步数据
静态文件服务
ES6/ES7 语法支持
打包和压缩 JS 和 CSS
HTML头部标签管理
本地开发支持热加载
集成ESLint
支持各种样式预处理器： SASS、LESS、 Stylus等
1.安装与初始化
官网文档: https://www.nuxtjs.cn/guide/installation
脚手架工具: https://github.com/nuxt/create-nuxt-app
脚手架安装成功后, yarn create nuxt-app <项目名> 创建一个项目,
之后开始选择配置:
选择完成后自动开始安装!
|
1 2 3 4 5 6 7 8 9 |
🎉 Successfully created project nuxt.js To get started: cd nuxt.js yarn dev To build & start for production: cd nuxt.js yarn build yarn start ✨ Done in 175.37s. |
2.启动项目
根据上述提示启动即可!
3. 打包编译, 怎么把项目部署到服务器
首先我们build之后, 拷贝
.nuxt
nuxt.config.js
package.json
这三个文件到服务器即可
拷贝到服务器后, 首先安装依赖, cnpm install
安装成功后, 执行 npm run start
如果没有错误, 会启动项目, 和本地启动一样, 其实这样我们就可以访问了,
开启 liunx 服务器的内外防火墙端口 , 然后浏览器直接访问: 你的 ip:端口号
4. 配置域名访问
当然只能带端口访问肯定不是我们想要的结果, 那么我们就需要配置 域名, 域名解析到服务端这些流程就不说了,
我们找到nginx的配置文件, 在 http{}模块里面新增:
|
1 2 3 |
upstream vrserver { server 0.0.0.0:3356; } |
其中ip地址写: 0.0.0.0:端口号
之后再新建一组 server{} ;正常nginx配置就不描述了,
比如我要配置成功: http:xxxx.com/v2/ 作为访问地址, 那就在 xxx.com的nginx 里面新建
|
1 2 3 4 5 |
location /v2/ { proxy_pass http://vrserver; proxy_set_header Origin ''; index index.html index.htm; } |
新建成功后, 重启nginx, 然后访问 http:xxxx.com/v2/ 就可以访问到我们的服务了
5. 怎么让我们的 nuxt.js服务一直启动
现在如果我们关闭终端, 那服务就关闭了, 接下来我们安装 pm2, 让服务在后台一直运行
关于pm2 的介绍: http://blog.he29.com/wblog/?p=1186
然后新建一个 pm2.config.json
|
1 2 3 4 5 6 7 8 9 |
{ "apps": { "name": "vr-sever", "script": "npm run start", "ignore_watch": [ "node_modules" ] } } |
简单配置即可, 然后我们启动: pm2 start pm2.config.json
6 其他问题
- 如何配置https
- 如果让代码修改后自动重启
7.项目体验
目前芊云全景使用的是 nuxt.js 的服务, 具体体验请浏览: https://vr.he29.com/v3/
