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