vue + webpack 實用技巧

2023年3月30日 94次阅读 来源: edgardeng

vue + webpack 實用技巧

應用 webpack 給臨盆環境和宣布環境設置差別的接口地點

在開闢時，前後端星散同時舉行開闢。前端挪用後端給的接口也是在局域網內部的。然則，當項目推到線上的時刻,會從實在服務器上獵取接口,在測試接口和實在接口之間頻仍切換，讓人非常噁心。

第一步，在webpack設置文件中，離別設置差別的接口地點

翻開dev.en.js文件。修正以下：

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

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_ROOT: '"//192.168.1.8/api"' // 增加api地點
})

同樣在prod.env.js文件中

module.exports = {
  NODE_ENV: '"production"',
  API_ROOT: '"//www.baidu.com/api"'
}

第二步，在代碼中挪用設置好的參數

比方我的：　src/config/api.js文件

// 本來的API接口地點
var root = 'https://cnodejs.org/api/v1'
// 新設置的API接口地點
var root = process.env.API_ROOT

末了

npm run dev　的時刻，跑的就是測試接口。而我們運轉

npm run build　打包項目的時刻，打包的是服務器正式接口

    原文作者：edgardeng
    原文地址: https://segmentfault.com/a/1190000014536019
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞