vue-nuxt.js部署到宝塔主机服务器

废话很少说,直接上步骤,以下:

本文章为在 vue环境下使用了nuxt.jsvue

一、搭建环境--因为本人安装的是宝塔主机,所以以下:node

因为我直接使用的是宝塔主机,直接去“软件管理”安装 PM2管理器。 安装好之后点击“设置”,找到“模块管理”,直接安装须要的模板,我使用的是nuxt,所以我也直接安装了 nuxt。 (这里安装有没有用我目前不太清楚,我只是知道我项目里使用了nuxt,全部我就顺便安装了,时间太忙也就没深刻研究了) 

二、添加站点git

站点添加成功后修改站点配置文件,直接在配置文件顶部增长 upstream nodenuxt { server 127.0.0.1:3003; #nuxt项目 监听端口 keepalive 64; } //如下为以前默认的数据,不用管 server { listen 80; server_name mysite.com; location / { proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; proxy_set_header Host $host; proxy_set_header X-Nginx-Proxy true; proxy_cache_bypass $http_upgrade; proxy_pass http://nodenuxt; #反向代理 } } 

三、设置反向代理npm

因为以上配置了 127.0.0.1:3003 所以反向代理的目标URL也为 http://127.0.0.1:3003 发送域名:mysite.com //项目的访问域名 

四、本地项目下的package.json里设置, 注意:start 使用了3003端json

"scripts": { "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server", "online": "cross-env NODE_ENV=production nuxt start", "build": "nuxt build", "start": "PORT=3003 nuxt start", "generate": "nuxt generate", "lint": "eslint --ext .js,.vue --ignore-path .gitignore .", "precommit": "npm run lint" }, 

五、项目本地完成后, npm run build 打包应用浏览器

打包完成后将如下四个文件上传到服务器空间 .nuxt //打包生成的文件夹 static //默认静态文件 nuxt.config.js //nuxt项目配置文件 package.json //配置文件 

六、在服务器上部署运行服务器

1. 使用命令模式:终端或者其余方式连接上服务器 2. 本身先测试一下服务器上是否安装支node npm,检查一下版本号 node -v npm -v 2. 进入到该项目的根目录 3. 运行 npm install 安装package里的依赖 4. 安装好3之后,再运行 npm start 就能够运行起来nuxt的服务渲染了 以下: > my-nuxt@1.0.0 start /www/wwwroot/mysite.com > PORT=3003 nuxt start 到了这里咱们就能够在浏览器上输入 mysite.com 访问了。服务端渲染瞬间出来了。 #### 别得意,这里还没完成呢。 ,上面的效果是并不理想的,因此咱们须要开启进程守护来稳定常驻后台 

七、pm2 开启进程守护测试

pm2 start npm --name "my-nuxt" -- run start //my-nuxt为咱们自定义的项目名称,也是咱们自定义的守护进程名称 ┌──────────┬────┬─────────┬──────┬───────┬────────┬─────────┬────────┬─────┬───────────┬──────┬──────────┐ │ App name │ id │ version │ mode │ pid │ status │ restart │ uptime │ cpu │ mem │ user │ watching ├──────────┼────┼─────────┼──────┼───────┼────────┼─────────┼────────┼─────┼───────────┼──────┼──────────┤ │ my-nuxt 0 0.33.4 │ fork 23278 │ online 0 0s 0% 15.6 MB │ root │ disabled └──────────┴────┴─────────┴──────┴───────┴────────┴─────────┴────────┴─────┴───────────┴──────┴──────────┘ 出现了以上的图案数据,说明守护进程已经开启了。 

OK,到了这里也就完成了,你能够放心的访问你的域名。 就能够正常的访问啦。ui

以上为我实际操做得出的步骤,若是按照步骤完成仍是不能访问,那就很抱歉没能帮到你,你也继续努力....spa

相关文章
相关标签/搜索