zoukankan      html  css  js  c++  java
  • 在webpack搭建的vue项目中如何管理好后台接口地址

    在最近做的vue项目中,使用了webpack打包工具,以前在做项目中测试环境和生产环境的接口地址都是一样的,由于现在接口地址不一样,需要在项目打包的时候手动切换不同的地址,有时候忘记切换就要重新打包,来回很是麻烦,今天网上翻看到一个很好的方法可以解决这个问题,也是由于对webpack工具不是很了解,其实这个工具已经提供了解决方案.

    参考网站:http://blog.csdn.net/gebitan505/article/details/58166055;

    在config文件夹里面有三个js文件,分别是dev.env.js,index.js和prod.env.js,分别代表了测试环境的配置信息,主要的配置信息,生产环境的配置信息.

    打开dev.env.js文件;在NODE_ENV下面增加一项,代码如下:

    var merge = require('webpack-merge')
    var prodEnv = require('./prod.env')
    
    module.exports = merge(prodEnv, {
      NODE_ENV: '"development"',
      API_ROOT: '"//192.168.1.8/api"'//测试环境的接口
    })

    然后,在编辑prod.env.js文件,代码如下

    module.exports = {
      NODE_ENV: '"production"',
      API_ROOT: '"//www.baidu.com/api"'//生产环境的接口
    }

    最后将设置的root url改成:process.env.API_ROOT,

    例如将let rootUrl = "http://test.api.com"改为let rootUrl = process.env.API_ROOT;

    webpack在本地测试的时候使用的是测试接口,打包的时候会自动将接口替换为生产环境的接口;很方便

  • 相关阅读:
    as3 三行三列 布满9个为一个界面
    as3 判断鼠标移动方向
    求两点之间 的直线距离
    AS3 localToGlobal、globalToLocal方法的总结
    as3 TweenMax TweenLite方法
    禁止点击
    影片 发光 变色
    ASCII字符串互换
    关于C语言的书
    关于态度
  • 原文地址:https://www.cnblogs.com/lxlin/p/8401460.html
Copyright © 2011-2022 走看看