vue-cli 根据不同的环境打包

Question

项目开发中有三个环境，分别是测试环境，预生产环境，生产环境

如题，根据项目需要，目前需要打包，通过vue-cli中的npm run build 打包，这个只能打包到一个环境，但是，项目中有三个环境，每个环境的接口地址都不同，根据process.env分别进行接口的调用，但是如何处理打包呢？

目前的解决方案是复制了几个，build下面的build.js ,感觉这样并不是最优的解决方案，
不知是否有更完美的解决方案？
感激不尽！

Answer 1

解决此类问题还得靠自己，大神一般都不给力
vue-cli 中build中build.js部分代码做如下修改

require('./check-versions')()

// process.env.NODE_ENV = 'production'

var ora = require('ora')
var rm = require('rimraf')
var path = require('path')
var chalk = require('chalk')
var webpack = require('webpack')
var config = require('../config')
var webpackConfig = require('./webpack.prod.conf')

var spinner = ora('building for ' + process.env.NODE_ENV + ' of ' + process.env.env_config+ ' mode...' )
spinner.start()
// var spinner = ora('building for production...')
// spinner.start()
。。。。

build中webpack.prod.conf.js做如下修改

const env = config.build[process.env.env_config+'Env']
// var env = process.env.NODE_ENV === 'testing' ?
//     require('../config/test.env') :
//     config.build.env
。。。。

config中的index.js 部分代码修改如下

module.exports = {
    build: {
        prodEnv: require('./prod.env'),
        sitEnv: require('./sit.env'),
        ppeEnv: require('./ppe.env'),
        index: path.resolve(__dirname, '../dist/' + new_dateTime + '/index.html'),
        。。。。。

config中 dev.env.js 修改
开发环境用的是测试接口，通过merge进行拷贝

var merge = require('webpack-merge')
var sitEnv = require('./sit.env')

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

在config中新建sit.env.js

//测试
module.exports = {
  NODE_ENV: '"sitEnvironment"',
  ENV_CONFIG: '"sit"',
  hosturl: '"https://sitxxx"',
。。。
}

在config中新建ppe.env.js

//预生产
module.exports = {
  NODE_ENV: '"ppeEnvironment"',
  ENV_CONFIG: '"ppe"',
hosturl: '"https://ppexxx"'
。。。
}

生产环境是prod.env.js vue-cli 自带

安装cross-env

package.json 修改

  "scripts": {
    "dev": "node build/dev-server.js",
    "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js",
    "build:ppe": "cross-env NODE_ENV=ppeEnvironment env_config=ppe node build/build.js",
    "build:sit": "cross-env NODE_ENV=sitEnvironment env_config=sit node build/build.js",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run e2e"
  },

end

Answer 2

前提：通过 vue-cli 使用 webpack 项目模板创建的项目

先研究一下 build 目录下的内容，然后设置不同的环境变量，API 路径、端口以及 vue-router 的 base 等，还可以通过 webpack define plugin 将环境变量传递到前端

如果想有人带着研究 build 目录下的内容，可以参加我的讲堂讲座《学习 Vue 你需要知道的 webpack 知识》，另外也可以参加极客学院的同名课程

Answer 3

let baseUrl = ''
if (process.env.NODE_ENV === 'development') {
  baseUrl = 'http://dev.xxx.com/Api'
} else {
  baseUrl = '//www.xxx.com/Api'
}

Answer 4

如何根据不同环境启动呢