项目不同环境配置不同接口域名—小程序入门与实战（十二）

上一章节，我们讲了小程序得模块化，怎么封装wx.request来发送请求。

这一章节我们讲的是开发项目过程中在开发环境，生产环境设置不同得请求接口域名。

新建 config.js

在 src/es6 目录，新建一个config.js文件

export default {
    BRAND:{
        name:'guojiangxiansir'
    },
    GLOBAL: {
        baseUrl: process.env.NODE_ENV === 'development' ? 'https://guojiang.club/' : 'https://guojiang.club/' // 运行时自动替换变量
    },
    VERSION:'1.0.0'
}

我们在 config.js 文件定义了两个变量,一个是BRAND一个是GLOBAL

process.env.NODE_ENV不懂什么意思的可以先 console.log(process.env.NODE_ENV)出来看一下，其实是你项目现在所处的环境，是为 development 开发环境，还是production 生产环境。

如果现在 process.env.NODE_ENV == 'development' 就是第一个域名，如果是生产环境就是第二个域名。

项目运行的命令：

npm  run dev //开发环境

npm run build //生产环境

想知道为什么的可以看package.json这两行代码：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --watch --progress --colors --config webpack.dev.config.js",
    "build": "webpack --progress --hide-modules --config webpack.prod.config.js"
  },

dev 运行的是 webpack.dev.config.js文件

build 运行的是 webpack.prod.config.js 文件

然后我们跟 sandBox.js文件一样，引到es6/myapp.js里面

import config from './config'

export {
    config
}

然后在sandBox.js引入 config.js

import config from './config';

# 将 sandBox 方法中的所有 url 属性换成

 url:config.GLOBAL.baseUrl + api,

这样我们就配置了在生产环境，开发环境不同的接口域名。

下一章节我们讲解个人中心页面。

本文由博客群发一文多发等运营工具平台 OpenWrite 发布