vue.js在打包的时候自动区分正式服和测试服的api url

iKcamp 发布于2019-08-21 17:43 / 365人阅读

摘要：我们在编写一个的时候往往会有正式服务器和测试服务器。比如正式服测试服则为我们查看生成的配置文件可以发现和两个文件中都通过向我们的传递了一个变量那么我们就可以使用它了。应该是正式服打包一份，测试服打包一份，而不是在运行时在判断是哪个。

我们在编写一个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是哪个。记录一下。

GPU云服务器云服务器自动打包 php中不区分在小写马斯克承认特斯拉最新的“完全自动驾驶测试 java测试url地址

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89921.html

使用vue开发pc前端及后台的项目总结(陆续更新)

摘要：所以只有写完整，才是正确的。具体可查看这里愿你成为终身学习者 showImg(https://segmentfault.com/img/bVbfNh2?w=1920&h=600); 1.让img标签适应比例缩放项目中做图片预览，如下图，效果要随着屏幕的大小来做自适应比例缩放，一开始用background-size:cover来做是可行的，但这里有包括上传图片的操作，而上传图片的文件流...

Baoyuan 2019-08-23 11:26 评论0 收藏0
内网穿透与反向代理，浅谈前后台分离

摘要：小米球可以实现内网穿透，他是怎么实现内网穿透，主要是通过域名的反向代理，这也就是所谓的反向代理。其实，反向代理没那么高大上，不要被它吓到了。域名解析也是同样的道理，利用了的反向代理。导读自去年毕业来到杭州，想想也该有大半年了。本身是软件工程的科班出身，在校时理论掌握的还可以。但应用到实践当中去，有些还是不大理解，于是，不停地向带我的人请教，毕竟，三人行，必有我师焉。经过一段时间理论...

developerworks 2019-08-23 15:40 评论0 收藏0
内网穿透与反向代理，浅谈前后台分离

摘要：小米球可以实现内网穿透，他是怎么实现内网穿透，主要是通过域名的反向代理，这也就是所谓的反向代理。其实，反向代理没那么高大上，不要被它吓到了。域名解析也是同样的道理，利用了的反向代理。导读自去年毕业来到杭州，想想也该有大半年了。本身是软件工程的科班出身，在校时理论掌握的还可以。但应用到实践当中去，有些还是不大理解，于是，不停地向带我的人请教，毕竟，三人行，必有我师焉。经过一段时间理论...

wangxinarhat 2019-08-16 15:33 评论0 收藏0