vue nuxt环境配置，配置env环境 配置cross-env

如果本文看完了，可以看一下完整版

整合篇nuxt配置env环境及配置cross-env及axios封装、请求封装、接口封装、proxy代理及nuxt的fetch调用接口方法https://blog.csdn.net/weixin_41863539/article/details/126057525?spm=1001.2014.3001.5502
因为我们日常项目中会遇到，production线上环境、test测试环境、development开发环境等，所以为了解决跨域或者每次打包前去更换ip地址然后部署到对应环境会很麻烦，所以我们使用cross-env去设置环境变量。

1.先安装cross-env

// 三选一，推荐yarn
npm install --save-dev cross-env

yarn add cross-env --save-dev

cnpm install --save-dev cross-env

2.在nuxt.config.js文件配置env环境(部分代码)

module.exports = {
  env: {
    // 对应package.json的后端接口
    BASE_URL: process.env.BASE_URL,
    // 对应环境production、test等
    NODE_ENV: process.env.NODE_ENV
  },
  // 本地服务启动yarn dev的端口号
  server: {
      port: 3000
  },
  // 必须引入，不然无法使用axios跟代理
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/proxy'
  ],
  ...
}

3.在package.json配置(prod=production,dev=development)(部分代码)

{
  "name": "ange-blog",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "cross-env BASE_URL=你后端dev接口地址+端口 NODE_ENV=development nuxt",
    "build:prod": "cross-env BASE_URL=你后端prod接口地址+端口 NODE_ENV=production nuxt build",
    "build:test": "cross-env BASE_URL=你后端test接口地址+端口 NODE_ENV=test nuxt build",
    "start": "cross-env BASE_URL=你后端接口地址+端口 NODE_ENV=production nuxt start",
    "generate": "nuxt generate"
  },
  ...
}

至此配置完了，那么我们去看看怎么在axios怎么使用

1.在plugins文件夹创建axios.js

axios.js（注意这里的axios只是判断你当前环境然后使用哪个后端ip） 

import axios from 'axios'
export default axios.create({
  baseURL: process.env.NODE_ENV === 'production'
  ? process.env.BASE_URL : 'http://localhost:3000',
})

2.先创建utils文件夹，并在utils下新建request.js 

 request.js(部分代码)

// 引入plugins中的axios
import axios from '@/plugins/axios'
// 对应在package.json配置的后端接口ip
axios.defaults.baseURL = process.env.BASE_URL

至此已经解决配置环境问题，后面会写跟本文配套的axios（request.js）封装及axios代理解决跨域问题，敬请期待！nuxt配置env环境