nuxt項目部署（windows環境）

項目是由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

3. 使用pm2啓動nuxt項目：

這裏踩坑最多！！！
網上流傳的啓動方式：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還是有報紅，但是訪問成功了

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

爲了弄這個玩意兒，百度谷歌了好幾天啊，總算弄好了。

參考鏈接：

• 很關鍵的issues：pm2 issues
• Nuxt項目的部署
• 在windows環境下部署nuxt項目（線上發佈部署）
• Node pm2如何做進程管理Nuxt項目
• nuxt項目在windows環境下安裝部署
  …（還有一些零零散散的，就不寫出來了）