脚本宝典收集整理的这篇文章主要介绍了vue.js在打包的时候自动区分正式服和测试服的api url，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

我们在编写一个vue.js的时候往往会有正式服务器和测试服务器。
比如正式服http://api.marsdict.com
测试服则为http://apitest.marsdict.com

我们查看vue cli生成的webpack配置文件可以发现/build/webpack.dev.conf.js和/build/webpack.prod.conf.js两个文件中都通过

new webpack.DefinePlugin({
      'process.env': env
    }),

向我们的js传递了一个process.env变量,那么我们就可以使用它了。
例如我是在main.js这么实现区分的：

Vue.use(
  Ajax,
  (function() {
    return {
      baseURL:
        process.env === "production"
          ? "http://api.marsdict.com"
          : "http://apitest.marsdict.com"
    };
  })()
);

有关DefinePlugin可以阅读文档：http://webpack.github.io/docs...

阅读过其他人一些项目，有用window.location.href.indexOf('正式服域名') >= 0先来判断运行的环境再决定api的url，感觉不是很合理。

应该是正式服打包一份，测试服打包一份，而不是在运行时在判断api url是哪个。记录一下。

脚本宝典总结

以上是脚本宝典为你收集整理的vue.js在打包的时候自动区分正式服和测试服的api url全部内容，希望文章能够帮你解决vue.js在打包的时候自动区分正式服和测试服的api url所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。