vue2 webpack 测试时和生产时请求不同的接口地址

阅读 (6)
Vue2+VueRouter2+webpack 构建项目时,本地测试连接后端测试地址与生产地址不同,npm run dev 和 npm run build 请求地址不同,本文告诉你配置方法

第一步,分别设置不同的接口地址

首先,我们分别找到下面的文件:

/config/dev.env.js

/config/prod.env.js

实,这两个文件就是针对生产环境和发布环境设置不同参数的文件。我们打开dev.en.js文件。代码如下:  

var merge = require('webpack-merge')

var prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {

    NODE_ENV: '"development"'

})

好,我们在NODE_ENV下面增加一项,代码如下:

var merge = require('webpack-merge')

var prodEnv = require('./prod.env')



module.exports = merge(prodEnv, {

    NODE_ENV: '"development"',

    API_ROOT: '"http://192.168.1.100/api"'

})

然后,我们编辑prod.env.js文件,

module.exports = {

NODE_ENV: '"production"',

    API_ROOT: '"http://pruduction.demo.com/api"'

}

 

好。我们分别设定的请求接口已经有了。下面就是如何调用的问题了。

第二步,在代码中调用设置好的参数

以下文件和代码仅供参考。

我们打开src/config/api.js文件,将原来开头的代码

// 配置API接口地址
var root = 'http://pruduction.demo.com/api'

修改为

// 配置API接口地址
var root = process.env.API_ROOT

然后就完成了我们的配置工作。最后,重启项目,就能使新配置的接口地址生效了。

在经过这样的配置之后,我们在运行

npm run dev

的时候,跑的就是测试接口。而我们运行

npm run build

打包项目的时候,打包的是服务器正式接口,我们就不用调来调去了。

更新于:2018-08-04 10:19:00

留言

发表评论

标记为*的字段是必填项(邮箱地址不会被公开), 由于国内舆论控制, 评论需要管理员审核通过方可展示

返回顶部