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

根据项目需要，通过vue-cli中的npm run build 打包到不同的环境，例如测试环境，预发布环境，线上环境，根据process.env分别进行接口的调用

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']

// const env = process.env.NODE_ENV === 'testing'

//   ? require('../config/test.env')

//   : require('../config/prod.env')

config中的index.js

module.exports = {

    build: {

        prodEnv: require('./prod.env'), // 线上环境

        sitEnv: require('./sit.env'), // 测试环境

        ppeEnv: require('./ppe.env'), // 预发布环境

        ……

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、ppe.env.js

module.exports = {

  NODE_ENV: '"sitEnvironment"',

  ENV_CONFIG: '"sit"',

  BASE_API: '"http://*****"' // 测试环境地址

}

module.exports = {

  NODE_ENV: '"ppeEnvironment"',

  ENV_CONFIG: '"ppe"',

  BASE_API: '"http://******"' // 预发布环境地址

}

安装cross-env

npm install cross-env -D

package.json

 "scripts": {
　　 "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.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",
　　 "lint": "eslint --ext .js,.vue src","test": "npm run lint"

  },

打包时候我们只需要

npm run build:sit // 测试环境

npm run build:ppe // 预发布环境

npm run build:prod // 线上环境

巴特西

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

最新文章

热门文章