nuxt.js配置BASE_URL（基本域名）和NODE_ENV（环境变量）

一直以来，开发环境和生产环境的数据接口域名不同老是困扰着我

每次打测试包或者线上包，我都得手动切换域名，我相信不少人的作法跟这差很少，相似下面这样：

（你已经注意到，这个文件已经被我无情的删除了，由于我发现了属于我本身的新大陆）

每次打包都要切换注释，虽然也能接受，可是容易忘记或者出错，或者找这个配置文件都要找半天，

对于我这种反应迟钝、头脑常常性短路的人来讲实在太痛苦了，

有痛点，那就要寻求解决方法：

 

第一步：安装 cross-env（这个迷你的包可以提供一个设置环境变量的scripts）

 

npm i cross-env -D

 

 

 

第二步：配置BASE_URL和NODE_ENV

咱们不是有个package.json吗，里面是否是有个scripts对象？

// package.json
{
  "scripts": {
    "dev": "cross-env BASE_URL=https://devpc.17wawawa.com NODE_ENV=development nuxt",
    "start": "cross-env BASE_URL=https://devpc.17wawawa.com NODE_ENV=production nuxt start",
    "build": "cross-env BASE_URL=https://www.17wawawa.com NODE_ENV=production nuxt build",
    "test": "cross-env BASE_URL=https://test.17wawawa.com NODE_ENV=production nuxt generate",
    "generate": "cross-env BASE_URL=https://www.17wawawa.com NODE_ENV=production nuxt generate"
  },
}

先写cross-env，接着配置BASE_URL和NODE_ENV，

由于cross-env能跨平台地设置及使用环境变量，这样咱们在执行不一样的命令（npm run  xxx）时，都会设置相应的BASE_URL（基本域名）和NODE_ENV（环境变量）

必定要注意，命令必定要写在末尾，好比我上面的nuxt、nuxt start、nuxt build等等，不然 npm run 时会报错

执行不一样的命令就会自动设置不一样的BASE_URL和NODE_ENV

npm run dev  // BASE_URL=https://devpc.17wawawa.com NODE_ENV=development

npm run test  // BASE_URL=https://test.17wawawa.com NODE_ENV=production

npm run generate // BASE_URL=https://www.17wawawa.com NODE_ENV=production

 

千万别直接复制我上面的这段代码哦，由于每一个项目的BASE_URL通常都是不同的，你要换成本身项目的接口请求域名

 

第三步：配置nuxt.config.js

package.json中的scripts配置完成以后，还要去nuxt.config.js配置一下env，官方文档

// nuxt.config.js
module.exports = {
  mode: 'universal',
  env: {
    BASE_URL: process.env.BASE_URL,
    NODE_ENV: process.env.NODE_ENV
  }
}

 

第四步：如何使用

使用是最简单的，直接写process.env.BASE_URL就能够了，好比在咱们的axios配置文件里使用process.env.BASE_URL

或者你在任意页面console.log(process.env.BASE_URL)都是能够打印得出来的

 

 

今后之后，只须要执行不一样的打包命令就能够自动设置BASE_URL和NODE_ENV了，告别频繁的注释和取消注释，潇洒的删除你的if...else...设置baseUrl的文件吧