Nuxt项目部署

814 阅读1分钟

前端小白一枚,开始学习nuxt.js,最近学会了简单的部署,写篇文章记录下

经过学习,目前学会了nuxt的两种部署

- 部署到服务器(使用pm2)——npm run build

1.先对项目进行打包,npm run build,打包完成后进行npm run start 验证打包之后是否没问题。

打包成功: 微信图片_20220913103215.png npm run start成功

微信图片_20220913103637.png

2.需要几个文件,.nuxt文件夹,static文件夹,nuxt.config.js文件,packpage.json文件,ecosystem.config.js(这个为pm2的配置文件)文件压缩并解压上传到服务器目录下。

//ecosystem.config.js

module.exports = {
    apps: [
      {
        name: 'nuxt-test', //名字要与pagepack.json里面对应到
        exec_mode: 'cluster',//cluster模式,多实例多进程,但是只支持node,端口可以复用,不需要额外的端口配置,0代码实现负载均衡。
        //单实例多进程,常用于多语言混编,比如php、python等,不支持端口复用,需要自己做应用的端口分配和负载均衡的子进程业务代码。
        instances: '1', // Or a number of instances
        script: './node_modules/nuxt/bin/nuxt.js',
        args: 'start'
      }
    ]
  }

3.在服务器那里运行终端,npm i下载依赖,然后运行pm2 start 使用PM2进行进程守护(这里我使用的是宝塔面板)

4.在nginx配置文件选项那里配置反向代理

location / {
          #include  uwsgi_params; 
          proxy_set_header Host $host;
          proxy_http_version 1.1; 
          proxy_set_header Upgrade $http_upgrade;
          proxy_set_header Connection "upgrade";
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
          proxy_set_header X-Forwarded-For $remote_addr;
          proxy_pass http://localhost:3000/; //这个在服务器终端里面运行查看的端口
    }

- 部署到服务器__简便方法( npm run generate)

  1. 生成一个dist文件夹(等同于vue打包)
  2. 将打包好后的文件都上传到服务器目录下
  3. 配置nginx的反向代理
//nginx反向代理
        location /api {
          rewrite  ^.+api/?(.*)$ /$1 break; 
          include  uwsgi_params; 
          proxy_pass  http://110.40.198.146:3001/; //api接口的代理地址
        }

最后

小白一枚,希望各路大神多给点意见或者学习建议。