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特性。