vue-cli3.0配置多环境

思路：新建一个 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 命令加上

  "scripts": {
    "dev:dev": "set AJAX_URL=dev&&npm run dev",
    "dev:test": "set AJAX_URL=testing&&npm run dev",
    "dev:pro": "set AJAX_URL=production&&npm run dev",
    "dev": "vue-cli-service serve",
    "build:dev": "set AJAX_URL=dev&&npm run build",
    "build:test": "set AJAX_URL=testing&&npm run build",
    "build:pro": "set 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 = {
    // api接口请求地址
    baseUrl: '//www.example.com/',
    // cdn地址
    cdnUrl: ''
  }
} else if (process.env.AJAX_URL === 'testing') {
  SITE_CONFIG = {
    // api接口请求地址
    baseUrl: '//test.example.com/',
    // cdn地址
    cdnUrl: ''
  }
} else if (process.env.AJAX_URL === 'dev') {
  SITE_CONFIG = {
    // api接口请求地址
    baseUrl: '//dev.example.com/',
    // cdn地址
    cdnUrl: ''
  }
} else {
  SITE_CONFIG = {
    // api接口请求地址
    baseUrl: '/',
    // cdn地址
    cdnUrl: ''
  }
}

export default SITE_CONFIG

以上。

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

仅限于windows平台。

。

。

。

如果要在Linux平台运行打包，还要继续修改。

在命令行里面 set 变量值不生效，需要改放到 .env 文件。参考：https://cli.vuejs.org/zh/guide/mode-and-env.html

在根目录下新建以下文件：

##    .env.production 文件
NODE_ENV=production

##    .env.production.dev 文件
NODE_ENV=production
AJAX_URL=dev

##    .env.production.pro 文件
NODE_ENV=production
AJAX_URL=production

##    .env.production.test 文件
NODE_ENV=production
AJAX_URL=testing

npm 命令修改如下：

  "scripts": {
    "dev:dev": "set AJAX_URL=dev&&npm run dev",
    "dev:test": "set AJAX_URL=testing&&npm run dev",
    "dev:pro": "set AJAX_URL=production&&npm run dev",
    "dev": "vue-cli-service serve",
    "build:dev": "vue-cli-service build --mode production.dev",
    "build:test": "vue-cli-service build --mode production.test",
    "build:pro": "vue-cli-service build --mode production.pro",
    "build": "vue-cli-service build"
  }

好了，这样就算在Jenkins 里面也能打包了。

以上。。。