Vue利用 webpack 给多个环境配置不同的接口地址

vue-cli2搭建的项目，不同环境使用不同的数据接口地址/链接地址，发布测试、生产时需要手动切换地址，繁琐，容易出现地址错误问题。于是去学习下webpack配置。webpack官方地址(https://www.webpackjs.com/guides/public-path/)

由于我们项目中有4个环境，每个环境的数据接口/链接地址都不同，使用不同的命令启动不同环境，并使用不同数据接口/链接地址。

• 使用不同指令启动不同环境

package.json文件

  "scripts": {
    "dev": "cross-env server=dev node build/dev-server.js",
    "test": "cross-env server=test node build/dev-server.js",
    "pre": "cross-env server=pre node build/dev-server.js",
    "prod-dev": "cross-env server=prod-dev node build/dev-server.js",
    "build": "cross-env server=prod node build/build.js",
    "build-test": "cross-env server=test node build/build.js",
    "build-dev": "cross-env server=dev node build/build.js",
    "build-pre": "cross-env server=pre node build/build.js",
    "build-prod-dev": "cross-env server=prod-dev node build/build.js"
  },

 config/index.js文件

  dev: {
    env: require('./dev.env'),
    port: 8090,
    autoOpenBrowser: false,
    assetsSubDirectory: 'static',
    assetsPublicPath: '',
    proxyTable: {},
    // CSS Sourcemaps off by default because relative paths are "buggy"
    // with this option, according to the CSS-Loader README
    // (https://github.com/webpack/css-loader#sourcemaps)
    // In our experience, they generally work as expected,
    // just be aware of this issue when enabling this option.
    cssSourceMap: false
  },
  test: {
    env: require('./test.env')
  },
  pre: {
    env: require('./pre.env')
  },
  prod_dev: {
    env: require('./prod-dev.env')
  }

• config配置，分别新建pre.env.js、prod-dev.env.js、test.env.js、dev.env.js文件，对应配置不同的数据接口/链接地址

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

module.exports = merge(prodEnv, {
  RootUrl: 'https://api-dev.zwjk.com/',
  PreUrl: 'https://open-dev.zwjk.com/',
  ExprotRubikUUrl: 'https://open-dev.zwjk.com/',
  NODE_ENV: '"dev"'
})

• 利用webpack.DefinePlugin插件，将webpack中的配置地址输出，在webpack外使用

Webpack是属于Node的程序，Node环境下的环境变量，Webpack可以配置可以灵活读取。但是index.js里面是属于Webpack要构建的产物，如果里面也想读取环境变量。可以通过这个DefinePlugin插件定义一下，在index.js里面就可以读到了。

webapck.dev.conf.js文件

// 不同环境配置地址
module.exports = merge(baseWebpackConfig, {
  module: {
    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
  },
  // cheap-module-eval-source-map is faster for development
  devtool: '#cheap-module-eval-source-map',
  plugins: [
    new webpack.DefinePlugin({
      'process.env': config[process.env.server].env
    }),
    // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    // https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    }),
    new FriendlyErrorsPlugin()
  ]
})

webapck.prod.conf.js文件

//配置生产环境地址
var webpackConfig = merge(baseWebpackConfig, {
  module: {
    rules: utils.styleLoaders({
      sourceMap: config.build.productionSourceMap,
      extract: true
    })
  },
  devtool: config.build.productionSourceMap ? '#source-map' : false,
  output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
  },
  plugins: [
    // http://vuejs.github.io/vue-loader/en/workflow/production.html
    new webpack.DefinePlugin({
       'process.env': config[process.env.server].env
    })
  ]
})

于是在vue其他文件中都可直接使用webapck中配置的数据接口/链接地址

console.log('rootUrl',process.env.rootUrl)
console.log('preUrl',process.env.preUrl)
console.log('exprotRubikUUrl', process.env.exprotRubikUUrl)

参考链接：https://blog.csdn.net/FungLeo/article/details/54574049