VUE-CLI测试环境和打包正式环境的配置切换

config文件夹pro'd.env.js文件

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  API_ROOT:'"http://120.79.94.143/"'//配置开发端口
}

config文件夹dev.env.js文件

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

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_ROOT:'"http://api01.idataapi.cn:8000"'//配置测试端口
})

config文件夹index.js文件

'use strict'

const path = require('path')

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {},

    // Various Dev Server settings
    env: require('./dev.env'), // can be overwritten by process.env.HOST 配置测试环境
    port: 1902, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: true,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-


    /**
     * Source Maps
     */
    devtool: 'cheap-module-eval-source-map',
   
    cacheBusting: true,
    cssSourceMap: true
  },

  build: {
    // Template for index.html 配置开发环境
    env: require('./prod.env'),
    index: path.resolve(__dirname, '../dist/index.html'),

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

    /**
     * Source Maps
     */

    productionSourceMap: false,//false避免打包时，包太大

    devtool: '#source-map',
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],

    bundleAnalyzerReport: process.env.npm_config_report
  }
}

最后在js文件中通过process.env.API_ROOT;即可调用，这里的API_ROOT即为你定义的接口名

const root = process.env.API_ROOT;