開發環境

權限準備

為避免后續流程出現權限不足的相關提示，首先在終端中輸入以下代碼檢查當前系統是否已開啟了對系統文件夾的保護：

csrutil status

若結果為csrutil enabled，則需通過以下步驟關閉保護模式：

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

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

執行csrutil disable以關閉保護模式

執行csrutil status，結果為System Integrity Protection status：disabled，即保護模式已關閉

執行reboot以退出恢復模式并重啟系統

若保護模式未開啟或已通過上述步驟關閉，則繼續修改local用戶權限

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

Homebrew

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

安裝

在終端中執行下述語句以安裝Homebrew：

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

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

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

npm

npm是JavaScript的軟件包管理器，通過node.js執行(通過homebrew安裝npm時，若本地未安裝過node.js，將根據依賴關系自動安裝)。

安裝

brew install npm

授予npm相應操作權限

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

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

vue.js

安裝vue-cli

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

sudo npm install -g @vue/cli

通過PhpStorm/WebStorm創建Vue.js項目

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

通過命令行創建Nuxt.js項目

// 安裝Nuxt.js的項目創建工具

npm install -g create-nuxt-app

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

create-nuxt-app name_of_project

按需安裝非核心組件

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

// vue.js路由管理組件

npm install --save vue-router

// vue.js狀態管理組件

npm install --save vuex

// 網絡請求組件

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規則

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文件上傳到環境即可。

Nuxt.js項目universal模式

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

// 安裝依賴包并啟動環境

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

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

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

PM2守護進程

// 安裝PM2

npm install pm2

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

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

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

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

// 確認PM2安裝情況

pm2 -v

// 通過PM2啟動項目

pm2 start npm -- start

// 確認項目啟動情況

pm2 list

日常發布流程

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

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

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。