Nuxt項目從開始到部署

前期接了個私人項目，作個官網，想到在公司都是使用vue技術棧，而官網恰好可使用nuxt來作。

開始

安裝

nuxt安裝能夠按照官網的步驟來

// 默認安裝 create-nuxt-app
yarn create nuxt-app <project-name>
cd <project-name>
yarn dev
複製代碼

使用預處理器

項目下直接安裝對應的預處理器

yarn add less less-loader
複製代碼

全局組件

在plugins文件夾下建立lib-components.js文件

import Vue from 'vue';

import LoadImage from "../components/LoadImage";

const components = { LoadImage };

Object.entries(components).forEach(([name, component]) => {
  Vue.component(name, component)
});
複製代碼

在nuxt.config.js文件中配置

...
  plugins: [
    ...
    '@/plugins/lib-components'
  ],
  ...
複製代碼

掛載全局http請求

若是咱們想在全局來作請求，在傳統的vue項目中，咱們能夠在main.js中掛載到原型上，而在nuxt項目上仍是經過plugins目錄。

// 在plugins目錄中創建request.js
// axios 配置可自定義
Vue.use({
  install: function(Vue) {
    Vue.prototype.$http = http;
  }
});
複製代碼

在nuxt.config.js文件中配置

...
  plugins: [
    ...
    '@/plugins/request'
  ],
  ...
複製代碼

其餘的配置與問題其實均可以在官網中查到，語法與vue徹底無縫對接。

部署

項目編寫完成後要部署到線上，由於這個項目仍是一個先後端分離的項目，且前端仍是使用nginx來作代理。

安裝node

服務器使用的是centos系統，可使用yum安裝

curl -sL https://rpm.nodesource.com/setup_10.x | bash -

yum install -y nodejs

node -v
複製代碼

拷貝文件

• 先本地執行 yarn build命令
• 拷貝下面標記的文件至服務器部署目錄/opt/deploy/front

進入目錄執行

cd /opt/deploy/front

npm install -production

npm run start
複製代碼

nginx配置

server {
    listen 80;
    server_name www.test.com;
    
    location / {
        root /opt/deploy/front; # 前端文件目錄
        proxy_pass http://127.0.0.1:3000;
    }
    
}
複製代碼

啓動nginx後能夠訪問域名看到項目。

pm2守護進程

對於線上項目，若是直接經過 node app來啓動，若是報錯了可能直接中止致使整個服務崩潰，咱們可使用pm2對node進程管理

• 安裝

npm install pm2 -g
複製代碼

• 項目根目錄建立pm2.json

[
  {
    "name": "demo",
    "script": "npm run start",
    "env_dev": {
      "NODE_ENV": "development"
    },
    "env_production": {
      "NODE_ENV": "production"
    }
  }
]
複製代碼

• 啓動pm2

cd /opt/deploy/front

pm2 start pm2.json
複製代碼

• 經常使用pm2指令

pm2 start app.js               # 啓動app.js應用程序

pm2 start app.js --name="demo"  # 啓動應用程序並命名爲 "demo"

pm2 start app.js --watch       # 當文件變化時自動重啓應用

pm2 start script.sh            # 啓動 bash 腳本

pm2 list                       # 列表 PM2 啓動的全部的應用程序

pm2 show [app-name]            # 顯示應用程序的全部信息

pm2 logs                       # 顯示全部應用程序的日誌

pm2 logs [app-name]            # 顯示指定應用程序的日誌

pm2 stop all                   # 中止全部的應用程序

pm2 stop 0                     # 中止 id爲 0的指定應用程序

pm2 restart all                # 重啓全部應用

pm2 restart 0                  # 重啓id爲0 的應用程序

pm2 delete all                 # 關閉並刪除全部應用

pm2 delete 0                   # 刪除指定應用 id 0

pm2 startup                    # 建立開機自啓動命令

pm2 save                       # 保存當前應用列表
複製代碼

總結

整個項目從開始安裝到部署上線仍是很平滑的，畢竟都是使用的vue技術棧；可是仍是有能夠優化的空間，該項目不是一個完整的ssr項目，沒有很好的運用nuxt特性。