Taro请求域名配置
<h1 id="taro请求域名配置">Taro请求域名配置</h1><h2 id="背景">背景</h2>
<p>使用Taro进行小程序的开发，调用后端api获取信息，开发，测试，正式环境的域名是不同的。最初始的版本中，我们在不同环境中不断修改域名信息。这样造成一个问题，提交审核的时候我们一定要记得将域名改成正式版，不然会出现问题。这种人为控制，显然不能保证百分百没有问题。我们就考虑是不是可以通过process.env来区分不同的环境</p>
<h2 id="尝试使用processenv解决问题">尝试使用process.env解决问题</h2>
<h4 id="修改配置文件">修改配置文件</h4>
<p>原配置文件</p>
<pre><code>export const baseUrl = 'https://release.com/';
</code></pre>
<p>修改后配置文件</p>
<pre><code>let baseUrlPrefix = ''
const env = process.env.NODE_ENV === 'development' ? 'development' : 'production'
console.log(process.env.NODE_ENV)
switch (env) {
case 'development':
baseUrlPrefix = 'http://dev.com/'
break
case 'production':
baseUrlPrefix = 'https://release.com/'
break
}
export const baseUrl = baseUrlPrefix
</code></pre>
<h4 id="执行命令查看">执行命令查看</h4>
<p>执行命令</p>
<pre><code>npm run dev:weapp
</code></pre>
<p>发现控制台输出的process.env.NODE_ENV=development</p>
<p>执行命令</p>
<pre><code>npm run build:weapp
</code></pre>
<p>发现控制台输出的process.env.NODE_ENV=production</p>
<p>执行结果说明一个问题，我们是可以通过process.env进行判断的开发环境和正式环境</p>
<p>那么我们遗留下来一个问题：测试环境怎么办？</p>
<h2 id="测试环境怎么设置">测试环境怎么设置</h2>
<h4 id="执行npm-run-dev和build的区别">执行npm run dev和build的区别</h4>
<p>查看package.json文件</p>
<pre><code>"scripts": {
"build:weapp": "taro build --type weapp",
"dev:weapp": "npm run build:weapp -- --watch"
}
</code></pre>
<p>可以看出，dev和build的差别就是--watch，那么是不是--watch设置的process.env？</p>
<h4 id="--watch为什么使processenvdevelopment">--watch为什么使process.env=development</h4>
<p>查看源码 taro-build</p>
<pre><code>program
.option('--type ', 'Build type, weapp/swan/alipay/tt/h5/quickapp/rn/qq/jd')
.option('--watch', 'Watch mode')
.option('--page ', 'Build one page')
.option('--component ', 'Build one component')
.option('--env ', 'Env type')
.option('--ui', 'Build Taro UI library')
.option('--ui-index ', 'Index file for build Taro UI library')
.option('--plugin ', 'Build Taro plugin project, weapp')
.option('--port ', 'Specified port')
.option('--release', 'Release quickapp')
.parse(process.argv)
const { type, watch, ui, port, release, page, component, uiIndex } = program
let { env, plugin } = program
env = process.env.NODE_ENV || env
if (env) {
process.env.NODE_ENV = env
} else {
if (watch) {
process.env.NODE_ENV = 'development'
} else {
process.env.NODE_ENV = 'production'
}
}
</code></pre>
<p>这里可以看到当env不存在的时候，如果执行参数里面有watch就设置process.env.NODE_ENV = 'development'，否则就是'production'。</p>
<p>到这里你是不是发现了什么端倪？</p>
<h4 id="端倪">端倪</h4>
<p>除了--watch之外，taro执行build命令的时候还接受一个参数--env，设置当前所在环境的，那么我们的测试环境是不是可以通过这个参数设置来实现呢？</p>
<p>我们来修改一下package.json</p>
<pre><code>"scripts": {
"build:weapp": "taro build --type weapp",
"dev:weapp": "npm run build:weapp -- --watch",
"test:weapp": "npm run test:weapp -- --watch --env test"
}
</code></pre>
<p>修改配置文件</p>
<pre><code>let baseUrlPrefix = ''
const env = process.env.NODE_ENV === 'development' ? 'development' : (process.env.NODE_ENV === 'test' ? 'test' : 'production')
console.log(process.env.NODE_ENV)
switch (env) {
case 'development':
baseUrlPrefix = 'http://dev.com/'
break
case 'test':
baseUrlPrefix = 'https://test.com/'
break
case 'production':
baseUrlPrefix = 'https://release.com/'
break
}
export const baseUrl = baseUrlPrefix
</code></pre>
<p>执行命令</p>
<pre><code>npm run test:weapp
</code></pre>
<p>想象一下打印出来的process.env.NODE_ENV是什么？</p>
<h4 id="发生了什么">发生了什么？</h4>
<p>process.env.NODE_ENV = 'production'，为什么？</p>
<p>我们来看看我们的应用的config文件夹里面的index.js做了什么</p>
<pre><code>module.exports = function (merge) {
if (process.env.NODE_ENV === 'development') {
return merge({}, config, require('./dev'))
}
return merge({}, config, require('./prod'))
}
</code></pre>
<p>我们设置的process.env.NODE_ENV应该是test，走到这里webpack的配置文件使用的是prod的配置，我们看看prod.js里面写了什么</p>
<pre><code>module.exports = {
env: {
NODE_ENV: '"production"'
},
defineConstants: {
},
mini: {},
h5: {
/**
* 如果h5端编译后体积过大，可以使用webpack-bundle-analyzer插件对打包体积进行分析。
* 参考代码如下：
* webpackChain (chain) {
* chain.plugin('analyzer')
* .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin, [])
* }
*/
}
}
</code></pre>
<p>看到了吗，这里把NODE_ENV又重置成了production，我们来尝试调整</p>
<h4 id="增加test配置">增加test配置</h4>
<p>增加test.js配置在config文件夹中</p>
<pre><code>module.exports = {
env: {
NODE_ENV: '"test"'
},
defineConstants: {
},
mini: {},
h5: {}
}
</code></pre>
<p>修改index.js</p>
<pre><code>module.exports = function (merge) {
if (process.env.NODE_ENV === 'development') {
return merge({}, config, require('./dev'))
} else if (process.env.NODE_ENV === 'test') {
return merge({}, config, require('./test'))
}
return merge({}, config, require('./prod'))
}
</code></pre><br><br>
来源：https://www.cnblogs.com/hosjoy/p/12583890.html 回复：
LZ的解决方案很棒！终于把Taro多环境配置这个问题讲清楚了。之前我也被这个问题困扰过，看到很多帖子都是只讲开发和生产，测试环境很少提到。
给LZ补充几点，可能会有帮助：
1. 关于.env文件
Taro其实支持通过.env文件来配置环境变量，可以在项目根目录创建.env、.env.dev、.env.prod等文件，这样可能比修改package.json更直观一些。
2. 建议使用Taro官方推荐的方式
在config目录下的index.js中，已经有现成的env配置逻辑，LZ的方案很好，不过可以更简洁一点。也可以直接在mini项目的配置中通过defineConstants来定义自定义的环境变量。
3. 小程序域名配置提醒
除了后端API域名，小程序还需要在微信公众平台配置request合法域名、socket合法域名等，这些也要注意区分环境哦。
另外想问下，LZ的方案在测试环境的时候，微信开发者工具那边需要怎么配置？我之前用类似方案的时候，测试环境的域名还得手动在开发者工具里切换，有点麻烦。
不过整体来说，LZ这个方案已经很完善了，学习了！
来源：https://www.cnblogs.com/hosjoy/p/12583890.html
頁:
[1]