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

權(quán)限準備

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

csrutil status

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

重新啟動，并按住command + R組合鍵進入macOS的恢復模式

點擊主界面上方菜單欄實用工具→終端

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

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

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

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

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

Homebrew

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

安裝

在終端中執(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時，若本地未安裝過node.js，將根據(jù)依賴關(guān)系自動安裝)。

安裝

brew install npm

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

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

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

vue.js

安裝vue-cli

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

sudo npm install -g @vue/cli

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

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

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

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

npm install -g create-nuxt-app

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

create-nuxt-app name_of_project

按需安裝非核心組件

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

// vue.js路由管理組件

npm install --save vue-router

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

npm install --save vuex

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

npm install --save axios

// 表單驗證組件

npm install --save vuelidate

// SASS/SCSS編譯器

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

部署vue.js項目

// 本地通過webpack進行打包

npm run build

// 注：若服務器端使用Nginx管理服務，則需做相應配置；以寶塔Linux面板的站點配置文件為例：

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

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

Nuxt.js項目universal模式

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

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

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

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

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

PM2守護進程

// 安裝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”，則需刪除已有軟連接，然后再次運行上述“l(fā)n -s...”語句

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

// 確認PM2安裝情況

pm2 -v

// 通過PM2啟動項目

pm2 start npm -- start

// 確認項目啟動情況

pm2 list

日常發(fā)布流程

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

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

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

pm2 start npm -- start // 通過PM2運行npm的start命令啟動項目

總結(jié)

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

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