项目是由vue-cli转换过来的,编码工作是前端兄弟做的,然后给到我这边去部署,我压根不懂nuxt项目,这可把我折腾坏了,还好最后还是搞定了 (^▽ ^),赶紧记录一下。

首先把配置贴上来:

package.json

{
  "name": "ssr",
  "version": "1.0.0",
  "description": "My cat's pajamas Nuxt.js project",
  "author": "keffSha",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server",
    "build": "nuxt build",
    "start": "cross-env NODE_ENV=production node server/index.js",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.3.6",
    "@nuxtjs/proxy": "^1.3.3",
    "@nuxtjs/router": "^1.5.0",
    "cross-env": "^5.2.0",
    "echarts": "^4.4.0",
    "element-ui": "^2.4.11",
    "jquery": "^3.4.1",
    "koa": "^2.6.2",
    "moment": "^2.24.0",
    "net": "^1.0.2",
    "nuxt": "^2.0.0",
    "nuxt-start": "^2.10.2",
    "sockjs-client": "^1.4.0",
    "stompjs": "^2.3.3",
    "vue-awesome-swiper": "^3.1.3",
    "vue-cropper": "^0.4.9"
  },
  "devDependencies": {
    "element-theme-chalk": "^2.12.0",
    "node-sass": "^4.13.0",
    "nodemon": "^1.18.9",
    "sass-loader": "^8.0.0"
  }
}

项目结构是这样的在这里插入图片描述

我的部署流程是这样的:

  1. 在本地运行npm run build,打包成功后,将下列文件复制到服务器!
    本地目录:
    本地目录
    服务器目录:
    服务器目录
  2. 然后在服务器的当前目录下,执行npm install -production
  3. 下载完成后,执行npm start,试试直接运行是否成功(我的是成功的,访问127.0.0.1:8888能访问成功)
    端口号配置:
    在这里插入图片描述

现在改成用PM2启动(不知道什么是PM2的请自行百度)

  1. 全局安装PM2:npm i pm2 -g
  2. 设置PM2开机自启:
  1. 安装并配置pm2-windows-service:npm i -g pm2-windows-service
  2. 添加系统环境变量(右键 [我的电脑] - [属性] - [高级系统设置] - [环境变量] - 新建 [系统变量] ) PM2_HOME=C:\Users\Administrator.pm2(路径默认在当前用户下的.pm2)
  3. 以管理员权限打开新的cmd命令行窗口,执行以下命令来安装服务
    pm2-service-install 提示Perform environment setup ? 选 n, 继续,此时, PM2服务已安装成功并已启动, 可以通过 [win + r] - [services.msc]
    来查看,服务名称为PM2
  1. 使用pm2启动nuxt项目:
pm2 start ./node_modules/nuxt/bin/nuxt.js -- start

这里踩坑最多!!!
网上流传的启动方式:pm2 start npm – run start(失败)
其他方式:
1. pm2 start node_modules/nuxt/bin/nuxt-start --name xxx(我压根就没有nuxt-start.js这个东西,然后执行npm install --save nuxt-start下载了nuxt-start,还是失败)
2. pm2 start ./node_modules/nuxt/bin/nuxt.js – start(成功!!!),虽然查看log还是有报红,但是访问成功了

  1. pm2 save
    保存当前pm2 正在管理的NodeJS服务, 并在开机后恢复这些服务,保存路径为系统环境变量设置的PM2_HOME路径

nginx配置(参照网上教程即可,没踩什么坑)

这里就直接贴代码吧

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;
                # 你的nuxt地址
                proxy_pass http://127.0.0.1:8888;
	}

为了弄这个玩意儿,百度谷歌了好几天啊,总算弄好了。

参考链接:

Logo

前往低代码交流专区

更多推荐