前端小册

Appearance

On this page

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安装

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

yum install -y nodejs

node -v

拷贝文件 ​

  • 先本地执行 yarn build命令
  • 拷贝下面标记的文件至服务器部署目录/opt/deploy/front

1h8h0x.png

进入目录执行

cd /opt/deploy/front

npm install -production

npm run start

nginx配置 ​

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进程管理

  • 安装
nginx
npm install pm2 -g
  • 项目根目录创建pm2.json
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特性。