vue生産環境開発環境構成の異なるインタフェースアドレス

1013 ワード


(1)それぞれ異なるインタフェースアドレスを設定する
構築したvue足場には、次の2つのファイルがあります(この2つのファイルは、本番環境とパブリッシュ環境に対して異なるパラメータを設定するファイルです).
     /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の下に1つ追加
module.exports = {
  NODE_ENV: '"production"',
  API_ROOT: '"//www.baidu.com/api"'  //         
}

そしてmainでjsファイル設定vueプロトタイプ
Vue.prototype.baseURL = process.env.API_ROOT;

これで構成が完了し、コンポーネントのalert(this.baseURL)で設定したアドレスがポップアップされます.