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的時候就是正式的線上環境。