Nuxt.js配置BASE_URL 开发与生产环境对应相应的接口地址

第一步: 检查包

检查package.json文件是否有 cross-env 这个包,没有的话执行下面命令;

npm install  cross-env -save

简写: npm i  cross-env -S

*cross-env --跨平台设置及使用环境变量包

 

---

第二步: 修改配置

package.json文件修改配置(baseUrl=测试域名或正式域名)

"scripts": {
    "dev": "cross-env baseUrl=http://api.测试.com nuxt",
    "build": "cross-env baseUrl=https://api.正式.com nuxt build",
    "start": "cross-env baseUrl=https://api.正式.com PORT=3000 nuxt start",
    "generate": "cross-env baseUrl=https://api.正式.com nuxt generate"
  },

---

第三步: 添加配置

nuxt.config.js文件添加env配置(env是environment环境的意思)

module.exports = {
  env: {
    baseUrl: process.env.BASE_URL
  }
}

有兴趣可以移步官方文档: The env Property (看不懂切换中文,看完中文记得再切换英文,因为有些释义中文翻译后怪怪的,会变得难以理解)

---

第四步: 引用配置

页面引用,使用 process.env.baseUrl

 asyncData() {
        return axios.get(process.env.baseUrl+"v1/default")
        .then((res) => {
        })
  },

---

拓展:

需要配置环境变量,参考: nuxt.js配置BASE_URL（基本域名）和NODE_ENV（环境变量）文章有用到NODE_ENV,这个应该是和express,koa配置使用server.js有关;

Nuxt.js官方配置地址: Nuxt.js 环境变量配置

---

小提示:

多看英文官方文档(中文更新慢),里面的Guide(教程)就像是一个有详情的目录,主要功能的使用方法在API.多看API,项目遇到的问题API都有,还有找一些QQ的Nuxt交流群也是不错的求知方式;

转载请注明来历;