1. 程式人生 > >vue生產環境開發環境配置不同的介面地址

vue生產環境開發環境配置不同的介面地址

(1)分別設定不同的介面地址

     找到我們所搭建的vue腳手架如下兩個檔案(這兩個檔案就是針對生產環境和釋出環境設定不同引數的檔案)

     /config/dev.env.js

     /config/prod.env.js

      首先開啟dev.env.js檔案程式碼如下

var merge = require('webpack-merge')
var prodEnv = require('./prod.env')

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

     底下增加一項

var merge = require('webpack-merge')
var prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_ROOT: '"//127.0.0.1/api"'  //介面路徑
})

 prod.env.js底下增加一項

module.exports = {
  NODE_ENV: '"production"',
  API_ROOT: '"//www.baidu.com/api"'  //根據自己的專案介面
}

  然後我們可以在main.js檔案設定vue原型

Vue.prototype.baseURL = process.env.API_ROOT;

 這樣我們就配置完成了,可以在元件當中alert(this.baseURL),就可以看到彈出我們設定好的地址了