Nuxt.JS项目开发小技巧（V2.15.7） - 配置接口基础地址（cross-env）

       哈喽，大家好！这一期给大家带来的是Nuxt开发中的一些小技巧。让我们一起来看看吧。

       这一期带来的小技巧是“统一资源URL管理”。因为现在流行前后分离式开发，所以前端和后端通信就离不开接口，一个项目里可能少说也得有近百个接口，如果有一天接口从V1升级到V2，那改项目的接口可谓异常酸爽了.....那么怎么解决这个问题呢？首先我们安装一个依赖包，在Terminal输入

yarn add cross-env

下载完成后到“package.json”检查一下“devDependencies”里有没有对应的依赖，如果有那么向上看到“scripts”这里，修改如下：

  "scripts": {
    "dev": "cross-env BASE_URL=http://127.0.0.1:2345/api/v1 NODE_ENV=development nuxt",
    "start": "cross-env BASE_URL=https://api.cptyun.com/api/v1 NODE_ENV=production nuxt start",
    "build": "cross-env BASE_URL=https://api.cptyun.com/api/v1 NODE_ENV=production nuxt build",
    "generate": "cross-env BASE_URL=https://api.cptyun.com/api/v1 NODE_ENV=production nuxt generate"
  },

相信这里面的开头的含义应该不用多说了吧？我们只需要把“BASE_URL=”后面改成对应的接口基础地址就OK了。

       接着我们来到“nuxt.config.js”，在顶部（export default内部即可）添加

env: {BASE_URL: process.env.BASE_URL},

       到此基础配置就完成了。在项目中使用，我们只需要将接口的基础地址使用 “process.env.BASE_URL”代替就可以了。示例如下（登录）：

fetch(process.env.BASE_URL+"/login",{...data...})

       以上就是本期内容了，如果对你有帮助请点一个免费的赞！