vue项目配置生产环境和发布环境的接口地址

1.设置不一样的接口地址

先找到如下文件

/config/dev.env.js

/config/prod.env.js

dev.env.js文件内容：

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"'
})

这是生产环境的参数配置，而后在dev.env.js文件加入一行代码，这就是本地测试环境请求后台接口的域名：

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_ROOT:'"//192.168.1.131/api"'
})

prod.env.js文件内容：

'use strict'
module.exports = {
  NODE_ENV: '"production"'
}

在prod.env.js文件中加入一行代码，以下，就是上传服务器之后，请求后台接口的域名

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  API_ROOT:'"/api"'
}

2.在代码中调用设置好的参数,

本项目中是在config的env.js中配置的的,将配置好的接口地址做为baseUrl拼接到接口路径中,应用参数部分以下:

let baseUrl = process.env.API_ROOT;
let routerMode = 'history';
let baseImgPath;

 

最后从新启动项目，当npm run dev的时候就运行在生产环境，当npm run build的时候就是正式的线上环境。