vue 和 ssr+nuxt.js 配置环境变量以及pm2进行服务部署

Posted 2021-08-16 郝峰Vip

前言

---

分享一下自己的ssr+nuxt.js开发的跨境电商的配置的项目环境变量。

nuxt.js配置环境变量

第一步：安装cross-env插件

npm install cross-env --save

第二步：根目录下创建env.js文件

第三步：env.js文件配置环境变量

配置各个环境下的接口地址和服务端口

export default {
  dev: {
    server: {
      host: '0.0.0.0',
      port: 8888,
    },
    api: {
      port: '',
      host: '开发环境接口地址'
    }
  },
  test: {
    server: {
      host: '0.0.0.0',
      port: 7085,
    },
    api: {
      port: '',
      host: '测试环境接口地址''
    }
  },
  uat: {
    server: {
      host: '0.0.0.0',
      port: 7085,
    },
    api: {
      port: '',
      host: '预发布环境接口地址''
    }
  },
  prod: {
    server: {
      host: '0.0.0.0',
      port: 7085,
    },
    api: {
      port: '',
      host: '生产环境接口地址''
    }
  }
}

第四步：nuxt.config.js配置基本的接口地址变量

import env from './env';
export default {
      env:{
     MODE:process.env.MODE
  },
  axios: {
    baseURL: env[process.env.MODE].api.host,
  },
  //修改默认的访问端口
  server: env[process.env.MODE].server,
}

pm2服务部署以及进程监听

第一步:在你要部署项目的服务器上或者你本地电脑执行命令安装pm2

npm install pm2 -g

第二步:安装成功后，在自己的nuxt项目内新建ecosystem.config.js文件

module.exports = {
    apps: [
      {
        name: '项目名称',
        exec_mode: 'cluster',
        instances: 'max', // Or a number of instances
        script: './node_modules/nuxt/bin/nuxt.js',
        args: 'start', //npm run start:test
        watch: true,   //启动热重载
       //配置环境变量，这里的环境变量要与nuxt里边的`package.json`文件的变量相同
        env_prod: {
          NODE_ENV: 'production',
          MODE: 'prod',
        },
        env_test: {
          NODE_ENV: 'test',
          MODE: 'test',
        },
        env_uat: {
          NODE_ENV: 'uat',
          MODE: 'uat',
        },
      },
    ],
  }
  

第三步:启动服务

把你的nuxt项目提交到服务器上准备部署

• 1，执行命令npm run build:prod
• 2, 执行命令pm2 start --env uat
  这个时候项目服务就已经跑起来了。

vue-cli 配置环境变量

第一步：根目录下新建以下文件

• 1 ,文件中的内容.env.test

# just a flag
ENV = 'test'

# base api
VUE_APP_BASE_API = '测试环境接口地址''

• 2 ,文件中的内容.env.development

# just a flag
ENV = 'development'

# base api
VUE_APP_BASE_API = '测试环境接口地址''

第二步：package.json文件配置环境变量

  "scripts": {
    "dev": "vue-cli-service serve --open",
    "build:prod": "vue-cli-service build",
    "build:test": "vue-cli-service build --mode test",
    "build:uat": "vue-cli-service build --mode uat",
    "test:unit": "vue-cli-service test:unit",
    "lint": "vue-cli-service lint"
  },

第三步：在页面中使用这个全局变量就好了

const service = axios.create({
    baseURL: process.env.VUE_APP_BASE_API, 
     timeout: 5000 // request timeout
})

结束语：这样全局的环境变量就配置好了

在其他页面也可以这样使用就好了。