vue.js 服务端渲染nuxt.js反向代理nginx部署
vue.js的官方介绍里可能提到过nuxt.js，我也不太清楚我怎么找到这个的
最近项目vue.js是主流了，当有些优化需求过来后，vue还是有点力不从心，
比如SEO的优化，由于vue在初始化完成之前，页面是没有任何内容的，所以基本上没有办法满足这个需求
比如有些访问量较大的主页里面，由于都是异步数据，所以在服务器数据没有返回之前，可能只能无奈的显示一个loadding....但是产品没办法理解这里面的技术流，他们只知道，能不能更快一点，甚至不用loadding~
我在vue这个环境下能做的：
把vue公共的库打包为一个js扔cdn上，加快访问速度的同时，全局访问一次后，客户端webview可以从本地缓存直接加载
简化热点数据请求次数，尽量在一次请求能完成的情况下一次请求完成
路由懒加载，基本每个页都是一个单独的chunk
可是在移动客户端产品来看，只是加快了一点加载的速度，体验上还是没什么改善。
静态化可能是一种好的选择，
这里可能不是介绍nuxt的用法，官方中文介绍文档已经很详细了：https://zh.nuxtjs.org/
涉及的功能关键字:vue-cli， nuxt-express，nginx
我的环境还是windows，所以这里用的nginx for windows（很多人说不行，我只是试一试，何必当真）
下载一个压缩包，解压就可以用了，目录结构(版本:1.13.3)
注意：解压的文件路径，不能用中文，否则服务无法启动
安装vue-cli
npm i vue-cli -D
下载模板项目
vue init nuxt/express sexpress
初始化加载包
npm install
编译
npm run build
到这里模板项目可以尝试运行一下了
npm run start
浏览器http://localhost:3000可以看到结果了
当我们把cmd的窗口关掉后，这个服务就自动停止了，如果需要一个常驻的服务去启动站点，这里需要安装一个pm2
npm install pm2 -g
安装成功后，pm2启动
-----------------------------------分割线-----------------------------------------
2018年12月10日更新
这篇文章写得很早，当时还是nuxt的1.0的版本，最近有不少人QQ直接问，所以在此做相应的修改，
现在的PM2启动命令更改如下
当然，你也可以去这个目录下面看看这个文件的内容，自己可以写一个简单的启动入口文件...
-----------------------------------分割线-----------------------------------------
修改本地host文件，站点名称自己定义
127.0.0.1 www.mywebsite1.com
修改nginx配置文件，/conf/nginx.conf，红字部分为修改的地方
#user nobody; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info; #pid logs/nginx.pid; events { worker_connections 1024; } http { include mime.types; default_type application/octet-stream; #log_format main '$remote_addr - $remote_user [$time_local] "$request" ' # '$status $body_bytes_sent "$http_referer" ' # '"$http_user_agent" "$http_x_forwarded_for"'; #access_log logs/access.log main; sendfile on; #tcp_nopush on; #keepalive_timeout 0; keepalive_timeout 65; #gzip on; upstream nuxtserver1 { server 127.0.0.1:3000; } server { listen 8088; server_name www.mywebsite1.com; #charset koi8-r; #access_log logs/host.access.log main; location /{ proxy_pass http://nuxtserver1; index index.html index.htm; } #error_page 404 /404.html; # redirect server error pages to the static page /50x.html # error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } # proxy the PHP scripts to Apache listening on 127.0.0.1:80 # #location ~ \.php$ { # proxy_pass http://127.0.0.1; #} # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000 # #location ~ \.php$ { # root html; # fastcgi_pass 127.0.0.1:9000; # fastcgi_index index.php; # fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name; # include fastcgi_params; #} # deny access to .htaccess files, if Apache's document root # concurs with nginx's one # #location ~ /\.ht { # deny all; #} } # another virtual host using mix of IP-, name-, and port-based configuration # #server { # listen 8000; # listen somename:8080; # server_name somename alias another.alias; # location / { # root html; # index index.html index.htm; # } #} # HTTPS server # #server { # listen 443 ssl; # server_name localhost; # ssl_certificate cert.pem; # ssl_certificate_key cert.key; # ssl_session_cache shared:SSL:1m; # ssl_session_timeout 5m; # ssl_ciphers HIGH:!aNULL:!MD5; # ssl_prefer_server_ciphers on; # location / { # root html; # index index.html index.htm; # } #} }
nginx重新启动
nginx -s reload
nginx的日志文件在/logs下面，如果没有启动，可以看看error.log
成功启动后，浏览器输入http://www.mywebsite1.com:8088/
-----------------------------------分割线-----------------------------------------
如果有问题欢迎QQ上直接问我！
