鍍金池/ 問答/HTML/ Vue.js中怎么配置發(fā)布的配置信息?

Vue.js中怎么配置發(fā)布的配置信息?

我在同事開發(fā)的Vue.js項目中:

我的config文件夾是這樣的:

clipboard.png

index.js:

'use strict'

const path = require('path')
module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',

    host:'localhost', // can be overwritten by process.env.HOST
    port: 8081, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

    devtool: 'cheap-module-eval-source-map',

    cacheBusting: true,

    cssSourceMap: true,
  },
    devServer: {
    historyApiFallbak: true,
    hot: true,
    host: "localhost",   //填寫你自己的IP地址
    port: 8080,   //填寫剛剛在dev字段中找到的port端口號
    inline: true,
    progress: true
 },
  build: {
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',

    productionSourceMap: true,

    devtool: 'cheap-module-source-map', 
    
    productionGzip: true,  //開啟 gzip 壓縮
    productionGzipExtensions: ['js', 'css'],

    
    bundleAnalyzerReport: process.env.npm_config_report
  }
}

prod.env.js代碼:

'use strict'
const MODEL = require('../static/config.js')
const pro= {
  NODE_ENV: '"production"'
}
module.exports =Object.assign({}, pro, MODEL)

這里引入的../static/config.js:

'use strict'
 var  pro= {
  BASE_API: '"http://10.10.10.100:8000/"',
  APP_ORIGIN: '"http://103.20.32.16:8000/"'
};
var Process=process.env
(function(){
  var  isNODE_ENV= Process.env.NODE_ENV=="production";
  if(isNODE_ENV) return;
  window.dev=pro ;
})();

dev.env.js是這個:

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

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

我現(xiàn)在要配置發(fā)布的環(huán)境的API和端口,是在哪里配置呢?


index.html中還有全局埋點:

<script type="text/javascript">
  // 全局請求埋點
  'use strict'
  var dev = dev || {};

  dev.NODE_ENV = {
    BASE_API: 'http://localhost:8000',
    APP_ORIGIN: 'http://103.20.32.16:8000/'
  }
</script>

我搜索全局APP_ORGIN 只有index.html和上面的../static/config.js才有,這個是規(guī)定的變量名還是自己寫的變量名?

回答
編輯回答
久不遇

這個變量名是自定義的,我們開發(fā)的時候為了方便會定義各種變量,來區(qū)分開發(fā)環(huán)境和生產(chǎn)環(huán)境,甚至是測試環(huán)境。

2017年6月12日 21:30