vue项目中针对不同环境下webpack打包指令配置

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: '"test"',
  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"
  },

你可能感兴趣的:(vue项目中针对不同环境下webpack打包指令配置)