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

上一章节,我们讲了小程序得模块化,怎么封装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,

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

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