開發(fā)環(huán)境

權(quán)限準(zhǔn)備

為避免后續(xù)流程出現(xiàn)權(quán)限不足的相關(guān)提示，首先在終端中輸入以下代碼檢查當(dāng)前系統(tǒng)是否已開啟了對系統(tǒng)文件夾的保護(hù)：

csrutil status

若結(jié)果為csrutil enabled，則需通過以下步驟關(guān)閉保護(hù)模式：

重新啟動(dòng)，并按住command + R組合鍵進(jìn)入macOS的恢復(fù)模式

點(diǎn)擊主界面上方菜單欄實(shí)用工具→終端

執(zhí)行csrutil disable以關(guān)閉保護(hù)模式

執(zhí)行csrutil status，結(jié)果為System Integrity Protection status：disabled，即保護(hù)模式已關(guān)閉

執(zhí)行reboot以退出恢復(fù)模式并重啟系統(tǒng)

若保護(hù)模式未開啟或已通過上述步驟關(guān)閉，則繼續(xù)修改local用戶權(quán)限

sudo chown -R $(whoami) /usr/local

Homebrew

Homebrew通過Ruby語言(macOS已預(yù)裝)執(zhí)行，用于安裝和管理macOS未預(yù)裝的軟件包，例如wget、composer、node(node.js)等，我們將通過Homebrew安裝npm，用于后續(xù)安裝Vue.js本地開發(fā)環(huán)境并創(chuàng)建webpack項(xiàng)目等。

安裝

在終端中執(zhí)行下述語句以安裝Homebrew：

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

P.S:如果需要重裝Homebrew，則執(zhí)行以下語句即可卸載已安裝的Homebrew：

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/uninstall)"

npm

npm是JavaScript的軟件包管理器，通過node.js執(zhí)行(通過homebrew安裝npm時(shí)，若本地未安裝過node.js，將根據(jù)依賴關(guān)系自動(dòng)安裝)。

安裝

brew install npm

授予npm相應(yīng)操作權(quán)限

sudo chown -R $USER:$GROUP ~/.npm

sudo chown -R $USER:$GROUP ~/.config

vue.js

安裝vue-cli

vue-cli是通過webpack創(chuàng)建vuejs項(xiàng)目所必須的命令行工具；webpack、webpack-cli將作為依賴項(xiàng)被一并安裝

sudo npm install -g @vue/cli

通過PhpStorm/WebStorm創(chuàng)建Vue.js項(xiàng)目

為避免PhpStorm更新引起的流程變動(dòng)，與PhpStorm相關(guān)的流程直接查看PhpStorm官方相關(guān)文檔即可。

通過命令行創(chuàng)建Nuxt.js項(xiàng)目

// 安裝Nuxt.js的項(xiàng)目創(chuàng)建工具

npm install -g create-nuxt-app

// 通過項(xiàng)目創(chuàng)建工具初始化新項(xiàng)目；這一步會(huì)詢問項(xiàng)目名稱、簡介、作者名、包管理器、UI框架、后端框架等信息

create-nuxt-app name_of_project

按需安裝非核心組件

通過命令行工具在項(xiàng)目根目錄下執(zhí)行相應(yīng)語句即可：

// vue.js路由管理組件

npm install --save vue-router

// vue.js狀態(tài)管理組件

npm install --save vuex

// 網(wǎng)絡(luò)請求組件

npm install --save axios

// 表單驗(yàn)證組件

npm install --save vuelidate

// SASS/SCSS編譯器

npm install --save --dev sass-loader node-sass

部署vue.js項(xiàng)目

// 本地通過webpack進(jìn)行打包

npm run build

// 注：若服務(wù)器端使用Nginx管理服務(wù)，則需做相應(yīng)配置；以寶塔Linux面板的站點(diǎn)配置文件為例：

upstream nodejs {

server localhost:3000; // 端口號需與Node.js端口號一致

keepalive 64;

}

server

{

listen 80;

// blablabla......

// 確保這是最后一條location規(guī)則

location / {

proxy_set_header X-Real-IP $remote_addr;

proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

proxy_set_header Host $http_host;

proxy_set_header X-Nginx-Proxy true;

proxy_set_header Connection "";

proxy_pass http://nodejs;

}

}

原生vue.js項(xiàng)目

完成打包后，將在項(xiàng)目根目錄下生成/build文件夾，將該文件夾及index.html文件上傳到環(huán)境即可。

Nuxt.js項(xiàng)目universal模式

完成打包后，將在項(xiàng)目根目錄的/.nuxt、/static、/store文件夾，nuxt.config.js、package.json文件上傳到環(huán)境后，在項(xiàng)目目錄下執(zhí)行下列語句進(jìn)行部署：

// 安裝依賴包并啟動(dòng)環(huán)境

npm cache clear --force // 清理npm緩存

npm install // 根據(jù)當(dāng)前package.json文件安裝依賴

npm run start // 根據(jù)package.json和nuxt.config.js文件啟動(dòng)項(xiàng)目

PM2守護(hù)進(jìn)程

// 安裝PM2

npm install pm2

// 若提示“-bash: pm2: command not found”，則需要調(diào)整全局變量的PM2軟連接

ln -s /root/.nvm/versions/node/v11.8.0/bin/pm2 /usr/local/bin/pm2

// 若提示“l(fā)n: creating symbolic link `/usr/local/bin/pm2': File exists”，則需刪除已有軟連接，然后再次運(yùn)行上述“l(fā)n -s...”語句

mv /usr/local/bin/pm2 /tmp/

// 確認(rèn)PM2安裝情況

pm2 -v

// 通過PM2啟動(dòng)項(xiàng)目

pm2 start npm -- start

// 確認(rèn)項(xiàng)目啟動(dòng)情況

pm2 list

日常發(fā)布流程

上傳項(xiàng)目文件到環(huán)境后，刪除環(huán)境中的package-lock.json，并運(yùn)行以下語句即可

npm cache clear --force // 清理npm緩存

npm install // 根據(jù)當(dāng)前package.json文件安裝依賴

pm2 start npm -- start // 通過PM2運(yùn)行npm的start命令啟動(dòng)項(xiàng)目

總結(jié)

以上是生活随笔為你收集整理的宝塔面板部署nuxt_MacOS下创建及部署vue.js项目（及Nuxt.js、PM2等相关流程）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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