VUE 識別生產環境 開發環境

恩~~~開發環境和生產環境接口往往不同~

開發環境+生產環境,開發環境就是在 /config/index.js下配置proxyTable 。

這裏簡單貼一下代碼,不多講。

 proxyTable: {
      '/api': {    //將www.exaple.com印射爲/apis
          target: 'https://xxx',  // 接口域名
          changeOrigin: true,  //是否跨域
          pathRewrite: {
              '^/api': ''   //需要rewrite的,
          },
          secure: false,
          headers: {
              Referer: 'https://xxx'
          }
      }
    },

主要講一下生產環境的問題。貌似是因爲打包項目後代理就失效啦,所以再生產環境下要重新配置一下。網上的方案有很多種,這裏就講一種我個人覺得還是挺不錯滴,生產和開發環境自動識別切換的一種配置方式。

 

(1)再config/dev.env.js下配置開發環境的API_ROOT

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

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_ROOT: '"/api"'   //這是新增的代碼
})

 

(2)再config/prod.env.js下配置生產環境的API_ROOT

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  API_ROOT: '"https://xxx/"'   //這是新增的代碼
}

(3)在需要調用的地方

export const evidence_url = process.env.API_ROOT + '/' + '';  

//process.env.API_ROOT 根據不同的環境會返回給你不同的API_ROOT

 

(4)重啓項目測試沒有問題,打包上傳吧!嘻嘻~

 

其實個人jue的VUE配置思路還是蠻簡單清晰的,因爲他內部做了封裝,所以我們寫的時候簡化了很多。

小白菜如果有什麼講的地方不正確,不完善的請大佬多多指教~

biu~~~

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章