vue-cli 3.x 配置多环境

思路：新建一个 process.env 变量。

把 webpack 配置放到 vue.config.js 里面。

如果根目录下没有该文件，新建。配置参考：https://cli.vuejs.org/zh/config/

vue.config.js 配置参考：

const webpack = require('webpack')
const merge = require('webpack-merge')
const env = process.env

module.exports = {
  publicPath: './',
  outputDir: 'dist',
  assetsDir: 'static',
  productionSourceMap: false,
  configureWebpack: {
    output: {
      filename: '[hash].js'
    },
    plugins: [
      new webpack.DefinePlugin({
        'process.env': merge(env, {
          'AJAX_URL': '"' + process.env.AJAX_URL + '"'  // 新建 AJAX_URL 变量
        })
      })
    ]
  }
}

安装工具

npm install --save-dev cross-env

 

npm 命令加上 AJAX_URL 的赋值操作，

dev：开发环境

testing：灰度发布环境

production：生产环境

"scripts": {
    "dev:dev": "cross-env AJAX_URL=dev npm run dev", 
    "dev:test": "cross-env AJAX_URL=testing npm run dev", 
    "dev:pro": "cross-env AJAX_URL=production npm run dev", 
    "dev": "vue-cli-service serve", 
    "build:dev": "cross-env AJAX_URL=dev npm run build", 
    "build:test": "cross-env AJAX_URL=testing npm run build", 
    "build:pro": "cross-env AJAX_URL=production npm run build", 
    "build": "vue-cli-service build" 
}

这样，就可以在业务代码里面使用 process.env.AJAX_URL 这个变量了。

可以把ajax请求的配置放到一个文件里面

let SITE_CONFIG

if (process.env.AJAX_URL === 'production') {
  SITE_CONFIG = {                         // 生产环境
    baseUrl: '//www.example.com/',        // api接口请求地址
    cdnUrl: '//www.cdn.com/'              // cdn地址
  }
} else if (process.env.AJAX_URL === 'testing') {
  SITE_CONFIG = {                         // 灰度发布环境
    baseUrl: '//test.example.com/',       // api接口请求地址
    cdnUrl: '//test.cdn.com/'             // cdn地址
  }
} else if (process.env.AJAX_URL === 'dev') {
  SITE_CONFIG = {                         // 开发环境
    baseUrl: '//dev.example.com/',        // api接口请求地址
    cdnUrl: '//dev.cdn.com/'              // cdn地址
  }
} else {                                   
  SITE_CONFIG = {                         // 本地环境
    baseUrl: '/',                         // api接口请求地址
    cdnUrl: '/'                           // cdn地址
  }
}

export default SITE_CONFIG

 

以上。

只需运行对应命令就可以实现平台切换了。