nuxt项目部署（windows环境）

最新推荐文章于 2024-08-16 10:58:51 发布

丶spare

最新推荐文章于 2024-08-16 10:58:51 发布

阅读量2.9k

点赞数 2

分类专栏： nuxt

本文链接：https://blog.csdn.net/weixin_42612454/article/details/102985418

版权

nuxt 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

首先把配置贴上来：

package.json

{
  "name": "ssr",
  "version": "1.0.0",
  "description": "My cat&#39;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"
  }
}

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

我的部署流程是这样的：

在本地运行npm run build，打包成功后，将下列文件复制到服务器!
本地目录：

服务器目录：
然后在服务器的当前目录下，执行npm install -production
下载完成后，执行npm start，试试直接运行是否成功（我的是成功的，访问127.0.0.1:8888能访问成功）
端口号配置：

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

全局安装PM2：npm i pm2 -g
设置PM2开机自启：

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

使用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还是有报红，但是访问成功了

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;
	}

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

参考链接：