Nuxt项目从开始到部署

jiezi

5 年前

前期接了个私人项目，做个官网，想到在公司都是使用 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'
  ],
  ...

如果我们想在全局来做请求，在传统的 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 来做代理。

服务器使用的是 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

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

启动 nginx 后可以访问域名看到项目。

对于线上项目，如果直接通过 node app来启动，如果报错了可能直接停止导致整个服务崩溃，我们可以使用 pm2 对node进程管理

安装

npm install pm2 -g

[
  {
    "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 特性。

Nuxt项目从开始到部署

开始

安装

使用预处理器

全局组件

挂载全局 http 请求

部署

安装 node

拷贝文件

nginx 配置

pm2 守护进程

总结