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

上一篇文章的部署流程有點不好的地方，就是它適用于只有唯一一個后臺接口路徑的部署，不適合需要根據(jù)多個環(huán)境切換后臺接口的情況。

為了解決需要根據(jù)不同環(huán)境（本地，測試，線上）切換請求的baseURL，我們需要引入cross-env , 來實現(xiàn)環(huán)境變量的設(shè)置，根據(jù)環(huán)境變量來切換baseURL。

為了設(shè)置環(huán)境變量，我們需要把打包的環(huán)節(jié)放到服務(wù)器，在服務(wù)器端進行打包。

首先我們需要保證項目中已經(jīng)安裝了cross-env，并且在nuxt.config.js中設(shè)置了env變量

env: { //環(huán)境變量 __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'}

?

接下來就說說我的部署步驟，由于直接在服務(wù)器打包，我們需要安裝所有項目的依賴，為了安裝依賴速度能快一點，我使用了淘寶鏡像源。

第一：首次部署項目 （1）服務(wù)器安裝node 和pm2依賴 服務(wù)器：切換到希望安裝這兩個依賴的目錄下，依賴可以用于多個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 第四步修改環(huán)境變量：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 再執(zhí)行一下查看 cnpm-v 看是否安裝成功 --安裝 unsafe-perm，避免個別依賴由于權(quán)限問題無法安裝 cnpm install --unsafe-perm (2) 從svn拉取項目代碼到本地（全量拉取即可，前端忽略提交node_modules,.nuxt，.history文件夾），安裝依賴 cnpm install (3) 根據(jù)不同環(huán)境打包項目 測試環(huán)境：npm run build-test rc環(huán)境: npm run build-rc 線上環(huán)境: npm run build-production (4)啟動項目：pm2 start npm --name?"official-website"?--?run?start ? 第二：后續(xù)更新項目 （1）：從svn拉取最新代碼 （2）：切換到項目目錄下執(zhí)行 cnpm install （3）：根據(jù)環(huán)境打包項目: 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

轉(zhuǎn)載于:https://www.cnblogs.com/daisygogogo/p/11304421.html

總結(jié)

以上是生活随笔為你收集整理的nuxt项目打包上线之二的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。