乐趣区

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来启动,如果报错了可能直接停止导致整个服务崩溃,我们可以使用 pm2node进程管理

  • 安装
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 特性。

退出移动版