nuxt項目打包上線之二

以前寫過一篇nuxt打包上線的文章，請看這裏：https://www.cnblogs.com/daisygogogo/p/11218809.html

上一篇文章的部署流程有點很差的地方，就是它適用於只有惟一一個後臺接口路徑的部署，不適合須要根據多個環境切換後臺接口的狀況。

爲了解決須要根據不一樣環境（本地，測試，線上）切換請求的baseURL，咱們須要引入cross-env , 來實現環境變量的設置，根據環境變量來切換baseURL。

爲了設置環境變量，咱們須要把打包的環節放到服務器，在服務器端進行打包。

首先咱們須要保證項目中已經安裝了cross-env，而且在nuxt.config.js中設置了env變量

 env: { //環境變量
    __ENV: process.env.__ENV
  }

在package.json中也作了命令配置

  "scripts": {
    "test": "jest",
    "dev": "cross-env process.env.__ENV=dev nuxt",
    "build": "nuxt build",
    "build-testing": "cross-env process.env.__ENV=testing nuxt build",
    "rc": "cross-env process.env.__ENV=rc pm2 start npm --watch --name 'web-pc' -- run start",
    "serve": "cross-env process.env.__ENV=serve pm2 start npm --watch --name 'web-pc' -- run start",
    "start": "nuxt start",
    "generate": "nuxt generate"
  }

 

在須要使用的地方就能夠這麼使用了，好比axios.js

  let baseURL = "";
  if(process.env.__ENV == 'rc'){
    baseURL = 'http://rc.xxx:8011'
  }else if(process.env.__ENV == 'production'){
    baseURL = 'https://www.xxx:4011'
  }else{
    baseURL = 'http://test.xxx:8011'
  }

 

接下來就說說個人部署步驟，因爲直接在服務器打包，咱們須要安裝全部項目的依賴，爲了安裝依賴速度能快一點，我使用了淘寶鏡像源。

第一：首次部署項目

（1）服務器安裝node 和pm2依賴

服務器：切換到但願安裝這兩個依賴的目錄下，依賴能夠用於多個node項目，這裏我新建了node_project文件夾

--安裝 node:

第一步下載： curl -O https://nodejs.org/dist/v10.16.0/node-v10.16.0-linux-x64.tar.xz

第二步解壓：xz -d node-v10.16.0-linux-x64.tar.xz tar -xvf node-v10.16.0-linux-x64.tar

第三步重命名：mv node-v10.16.0-linux-x64 node

第四步修改環境變量：vi ~/.bash_profile

PATH=$PATH:$HOME/bin   // 修改前 PATH=$PATH:$HOME/bin:/usr/local/src/node/bin   // 修改後

改好以後保存退出

第五步編譯剛剛修改的文件：source ~/.bash_profile

 

--安裝pm2

npm i -g pm2

 

--安裝 cnpm

cnpm -v

查看是否安裝了淘寶鏡像源，有東西打印出來則已安裝，沒有則安裝，安裝完成以後

npm install -g cnpm --registry=https://registry.npm.taobao.org

 

安裝完成後創建軟連接： （若是不知道cnpm的位置，能夠查找cnpm所在位置： find / -name cnpm）

ln -s /usr/local/node_project/node/lib/node_modules/cnpm/bin/cnpm /usr/local/bin/cnpm

 

再執行一下查看 cnpm-v 看是否安裝成功

 

 

--安裝 unsafe-perm，避免個別依賴因爲權限問題沒法安裝

cnpm install --unsafe-perm

 

(2) 從svn拉取項目代碼到本地（全量拉取便可，前端忽略提交node_modules,.nuxt，.history文件夾），安裝依賴 cnpm install

(3) 根據不一樣環境打包項目

測試環境：npm run build-test

rc環境: npm run build-rc

線上環境: npm run build-production

(4)啓動項目：pm2 start npm --name "official-website" -- run start

 

第二：後續更新項目

（1）：從svn拉取最新代碼

（2）：切換到項目目錄下執行 cnpm install

（3）：根據環境打包項目:

npm run build-test

npm run build-rc

npm run build-production

（4）pm2重啓項目 pm2 restart official-website， official-website爲上面啓動pm2的時候的項目名

 

項目代碼請戳github：https://github.com/daisygogogo/nuxt-element-ui-pc-website