Vue 不同環境配置 API 地址

Flyertutor發表於2018-03-09
VueAPI

我使用的是 Vue + ElementUI 進行構建的專案，在開發過程中，使用的是前後端分離的模式，所以經常會出現多環境配置資訊，尤其是 Api 介面地址的配置，如果在程式碼中使用判斷的方式，感覺不友好。

如果你使用的是 webpack，下面我來介紹一種方法可能會幫助到你：

使用 DefinePlugin 來根據不同的環境設定不同的配置資訊，具體參考

在 build 目錄下面找到

webpack.dev.conf.js
webpack.prod.conf.js
# webpack.dev.conf.js
...
plugins: [
  new webpack.DefinePlugin({
    'process.env': require('../config/dev.env'),
    'process.api': "'http://www.dev.com/'"  // 注意這裡的寫法
  })
]
...

# webpack.prod.conf.js
...
plugins: [
  new webpack.DefinePlugin({
    'process.env': require('../config/dev.env'),
    'process.api': "'http://www.prod.com/'"  // 注意這裡的寫法
  })
]
...

按照上面方式配置完畢之後，之後你就可以在專案中使用 process.api 進行呼叫了，打包的時候，會讀取不同的配置資訊，這樣是不是很方便。

如果你有更好的方法，請在下面評論中留言。

相關文章