前提：通過 vue-cli 使用 webpack 項(xiàng)目模板創(chuàng)建的項(xiàng)目

先研究一下 build 目錄下的內(nèi)容，然后設(shè)置不同的環(huán)境變量，API 路徑、端口以及 vue-router 的 base 等，還可以通過 webpack define plugin 將環(huán)境變量傳遞到前端

如果想有人帶著研究 build 目錄下的內(nèi)容，可以參加我的講堂講座《學(xué)習(xí) Vue 你需要知道的 webpack 知識(shí)》，另外也可以參加極客學(xué)院的同名課程

如何根據(jù)不同環(huán)境啟動(dòng)呢

解決此類問題還得靠自己，大神一般都不給力
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 修改
開發(fā)環(huán)境用的是測(cè)試接口，通過merge進(jìn)行拷貝

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

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

在config中新建sit.env.js

//測(cè)試
module.exports = {
  NODE_ENV: '"sitEnvironment"',
  ENV_CONFIG: '"sit"',
  hosturl: '"https://sitxxx"',
。。。
}

在config中新建ppe.env.js

//預(yù)生產(chǎn)
module.exports = {
  NODE_ENV: '"ppeEnvironment"',
  ENV_CONFIG: '"ppe"',
hosturl: '"https://ppexxx"'
。。。
}

生產(chǎn)環(huán)境是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

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