前言

分享一下自己的ssr+nuxt.js開發(fā)的跨境電商的配置的項(xiàng)目環(huán)境變量。

nuxt.js配置環(huán)境變量

第一步：安裝cross-env插件

npm install cross-env --save

第二步：根目錄下創(chuàng)建env.js文件

env.png

第三步：env.js文件配置環(huán)境變量

配置各個(gè)環(huán)境下的接口地址和服務(wù)端口

export default {
  dev: {
    server: {
      host: '0.0.0.0',
      port: 8888,
    },
    api: {
      port: '',
      host: '開發(fā)環(huán)境接口地址'
    }
  },
  test: {
    server: {
      host: '0.0.0.0',
      port: 7085,
    },
    api: {
      port: '',
      host: '測(cè)試環(huán)境接口地址''
    }
  },
  uat: {
    server: {
      host: '0.0.0.0',
      port: 7085,
    },
    api: {
      port: '',
      host: '預(yù)發(fā)布環(huán)境接口地址''
    }
  },
  prod: {
    server: {
      host: '0.0.0.0',
      port: 7085,
    },
    api: {
      port: '',
      host: '生產(chǎn)環(huán)境接口地址''
    }
  }
}

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

import env from './env';
export default {
      env:{
     MODE:process.env.MODE
  },
  axios: {
    baseURL: env[process.env.MODE].api.host,
  },
  //修改默認(rèn)的訪問端口
  server: env[process.env.MODE].server,
}

pm2服務(wù)部署以及進(jìn)程監(jiān)聽

第一步:在你要部署項(xiàng)目的服務(wù)器上或者你本地電腦執(zhí)行命令安裝pm2

npm install pm2 -g

第二步:安裝成功后，在自己的nuxt項(xiàng)目?jī)?nèi)新建ecosystem.config.js文件

module.exports = {
    apps: [
      {
        name: '項(xiàng)目名稱',
        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,   //啟動(dòng)熱重載
       //配置環(huán)境變量，這里的環(huán)境變量要與nuxt里邊的`package.json`文件的變量相同
        env_prod: {
          NODE_ENV: 'production',
          MODE: 'prod',
        },
        env_test: {
          NODE_ENV: 'test',
          MODE: 'test',
        },
        env_uat: {
          NODE_ENV: 'uat',
          MODE: 'uat',
        },
      },
    ],
  }
  

第三步:啟動(dòng)服務(wù)

把你的nuxt項(xiàng)目提交到服務(wù)器上準(zhǔn)備部署

• 1，執(zhí)行命令npm run build:prod
• 2, 執(zhí)行命令pm2 start --env uat
  這個(gè)時(shí)候項(xiàng)目服務(wù)就已經(jīng)跑起來(lái)了。

vue-cli 配置環(huán)境變量

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

vue-config.png

• 1 ,文件中的內(nèi)容.env.test

# just a flag
ENV = 'test'

# base api
VUE_APP_BASE_API = '測(cè)試環(huán)境接口地址''

• 2 ,文件中的內(nèi)容.env.development

# just a flag
ENV = 'development'

# base api
VUE_APP_BASE_API = '測(cè)試環(huán)境接口地址''

第二步：package.json文件配置環(huán)境變量

  "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"
  },

第三步：在頁(yè)面中使用這個(gè)全局變量就好了

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

結(jié)束語(yǔ)：這樣全局的環(huán)境變量就配置好了

在其他頁(yè)面也可以這樣使用就好了。