nuxt2项目详解及服务端宝塔环境部署

1.项目结构

1.  首先介绍一下我的项目结构

• .nuxt 是运行npm dun dev 或者  yarn dev  生成的（他就是通过你写的代码编译生成的）
• layouts 这个是自己创建的但是文件名称固定里面放的是 default.vue这个是项目框架文件
• middleware 这个文件夹里面的放的是中间件主要放进入项目之前的一些操作需要在nuxt.config.js 中引入（这个文件的执行时机是在项目启动之前具体可以看看nuxt的生命周期）
• node_modules  这个是项目依赖
• pages  主要的写代码的地方实现项目页面及业务逻辑
• plugins 存放项目中所需要的js
• static 静态文件
• store vuex状态保持工具
• nuxt.config.js  项目的配置文件 （重要）

2.项目的打包上线部署

• 我这里的部署环境是服务器上安装了宝塔
• 首先在nuxt.config.js中添加代码

   server: {
      port: 8089,
      host: '0.0.0.0',
    },

  这里的端口号需要服务器上先放行

• ecosystem.config.js 这个文件待会会用到是 使用pm2启动的入口文件它的作用就是为项目找到真正的项目入口文件

  module.exports = {
    apps: [
      {
        name: 'chengla', // 这个name就是pm2启动时需要的name
        exec_mode: 'cluster',
        instances: '1', // Or a number of instances
        script: './node_modules/nuxt/bin/nuxt.js',
        args: 'start',
      },
    ],
  }
  

  这里的script就是指向项目的真正入口文件

• 接下来就是把项目运行所需的问价上传服务器这里只需要上次以下文件

 首页先在本地运行 npm run build 或者  yarn build

然后将文件 .nuxt static ecosystem.config.js nuxt.config.js package.json package-lock.json上传到服务器

 这里的node_modules 是项目的依赖这里我们可以先把上面的文件上传上去然后npm i 安装不然上传的时候会很慢

当然在这之前服务器中需要安装node版本和本地一样的

 

我这边服务端安装PM2时候可以直接指定node版本很方便！！

所以服务端直接安装一个  PM2就可以搞定，在上传服务器的时候我们的网站是已经创建好的这里就不赘述了。

然后我们通过PM2中的添加项目就行

 

这里就快完成了

下面只需要再配置一个方向代理就大功告成