第一次將Vue-node.js前后端代碼發布到服務器運行

b站全棧之巔有詳細項目打包發布流程，針對小白新手的教程，下面放一個連接
https://www.bilibili.com/video/av58969687

1. 生產環境的編譯

在本地啟動vue項目時，一般都是分別 npm run serve啟動 客戶端的web，后台管理端的admin，服務端的server，然而要發布到服務器上時只會啟動一個server項目，那么現在將前端工程編譯到server目錄下

• 在前端工程目錄的src目錄下創建一個名為 .env.development 的配置文件，內容為 VUE_APP_API_URL=http://localhost:8001 的一個變量，它最好以VUE_APP開頭 ，將axios的baseURL換成baseURL: process.env.VUE_APP_API_URL || '/' 本地運行時會含有process.env ，而線上沒有這個屬性。

• 在工程文件admin根目錄下添加一個vue-cli配置文件 vue.config.js 內容如下

  
    module.exports= {
        outputDir: __dirname + '/../server/admin',         // 將生成好的dist文件放到服務端目錄下面
    
        publicPath: process.env.NODE_ENV === 'production'        // 將客戶端里面原來的文件引用地址換成服務端里各文件所在的路徑
        ? '/admin/'
        : '/'
    }
  

• 添加客戶端對服務器靜態文件訪問的能力。

  
        server.use('/',express.static(__dirname + '/web'));    // 當訪問peatechen.com/ 時為客戶端
        server.use('/admin',express.static(__dirname + '/admin'));    // 當訪問peatechen.com/admin時為后台管理端
  

2. nginx反向代理

server工程在服務器上啟動后向外暴漏的還是一個服務器的本地ip和端口，通過外網是無法訪問的，這時就需要用nginx將外網訪問請求代理到本地的端口，這里使用一個配置nginx反向代理的網站生成配置文件，https://nginxconfig.io ，在/etc/nginx/sites-enabled/目錄下加入生成后的配置文件，在/etc/nginx/下加入名為nginxconfig.io的文件夾

3. pm2啟動server工程

進入server目錄下，pm2 start index.js 啟動