Nuxt.js开发、测试、生产等环境配置

刚开始开发项目,因为开发环境和生产环境ajax请求数据的域名地址不同,每次部署到生产环境,都要去修改代码中ajax请求的域名地址,这样很麻烦,所以想到通过配置多环境方法解决。

通过Nuxt.js开发项目和vue-cli3一样可以进行多种环境配置,这样工程化开发项目,更为自动化,不必因为代码的执行环境变了,自己修改代码中的API域名地址。

cross-env

通过nodejs的cross-env模块可以进行nuxt项目的多种环境配置。

你可以查看nuxtjs项目根目录下的package.json文件中的cross-env模块。如果你的项目没有该模块可以执行npm i cross-env -D安装。

  "dependencies": {
    "cross-env": "^5.2.0",
  },

1. nuxt.config.js配置环境变量

点击官方文档查看API: 环境变量配置

nuxt.config.js配置文件中命名两个环境变量,BASE_URL表示数据请求地址URL,NODE_ENV表示当前环境的名称。

module.exports = {
  env: {
    BASE_URL: process.env.BASE_URL,
    NODE_ENV: process.env.NODE_ENV
  }
}

2. package.json命令行配置BASE_URL和NODE_ENV

BASE_URL表示不同环境对应的数据请求地址,比如http://localhost:3000/,比如http://localhost:3000/api/

NODE_ENV表示开发环境命名,以便代码中查询判断当前环境,你可以根据需要自由命名。

你只需要在script设置的任何一个命令行中插入cross-env BASE_URL=http://IP地址:端口号/路径/ NODE_ENV=当前环境命名,比如下面两个命令行的设置。

  "scripts": {
    "dev": "nodemon server/index.js --watch server",
    "build": "nuxt build",
  },
  "scripts": {
    "dev": "cross-env BASE_URL=http://localhost:3000/ NODE_ENV=development nodemon server/index.js --watch server",
    "build": "cross-env BASE_URL=http://localhost:3002/ NODE_ENV=production nuxt build",
  },

3. nuxt代码中访问环境和环境对应URL

通过代码process.env.BASE_URL查看当前环境对应的数据请求地址,通过process.env.NODE_ENV查看当前nuxt环境。你可以执行npm run dev命令进入nuxt开发环境,在vue代码中执行上面两句代码,并在浏览器控制台打印验证是否正确,比如你也可以把开发环境的命名NODE_ENV=development更改为NODE_ENV=dev,然后在浏览器控制台打印,查看process.env.NODE_ENV的值是否变化。

//浏览器控制台查看当前环境
console.log('process.env.NODE_ENV',process.env.NODE_ENV);
//查看当前环境对应的URL
console.log('process.env.BASE_URL',process.env.BASE_URL);

process.env.BASE_URL使用案例

通过process.env.BASE_URL设置axios的axios.defaults.baseURL属性。

import axios from 'axios'
// 设置baseURL
axios.defaults.baseURL = process.env.BASE_URL+'api'

process.env.NODE_ENV使用案例

判断当前环境,根据环境执行相应的代码

if(process.env.NODE_ENV==='development '){
//如果是开发环境执行这里代码
}else if(process.env.NODE_ENV==='production'){
//如果是生产环境执行这里代码
}