Vue給不同的環境配置不同的打包命令

  今天小鹹兒接着來給大家分享有關Vue的內容了：

  此模式僅適合於包含build和config配置文件

• 第一步：安裝cross-env

npm install --save-dev cross-env

• 第二步：修改各環境下的參數

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  EVN_CONFIG: '"prod"',
  KERNEL: "'https://****j.com/***-web'"
}

  接下來，分別對dev.env.js和test.env.js文件內容進行修改，修改內容如下：

  dev.env.js文件：

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  EVN_CONFIG: '"dev"',
  KERNEL: "'http://192.168.***.**/**-web'"
})

  test.env.js文件

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"test"',
  EVN_CONFIG: '"test"',
  KERNEL: "'http://192.168.***.**/**-web'"
})

• 第三步：修改項目中package.json文件

  對package.json文件中的scripts內容進行修改，添加上新定義的幾種環境的打包過程

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src",
    "build": "node build/build.js",
    "build:test": "cross-env NODE_ENV=production env_config=test node build/build.js",
    "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js",
    "build:dev": "cross-env NODE_ENV=production env_config=dev node build/build.js",
    "test": "webpack-dev-server --inline --progress --config build/webpack.test.conf.js",
    "prod": "webpack-dev-server --inline --progress --config build/webpack.prod.conf.js"
  },

注意：在這裏，NODE_ENV最好都設置成production，因爲在utils.js只做了production一種判定，不會對環境配置產生影響。

• 第四步：修改config/index.js文件

  修改config/index.js文件中的build參數，這裏的參數會在build/webpack.prod.conf.js中使用到

build: {
    // 添加生產、測試、開發環境配置
    prodEnv: require('./prod.env'),
    devEnv: require('./dev.env'),
    testEnv: require('./test.env'),
    // 以下內容不用做任何修改
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

• 第五步：在webpack.prod.conf.js中使用構建環境參數

  對build/webpack.prod.conf.js文件進行修改，調整env常量的生成方式

// const env = require('../config/prod.env')
const env = config.build[process.env.env_config+'Env']

• 第六步：調整build/build.js

  刪除process.env.NODE_ENV的賦值，修改spinner的定義，修改後的內容如下：

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

// process.env.NODE_ENV = 'production'

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

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

• 第七步：執行打包命令

  生產的打包命令：

npm run build:prod

  開發的打包命令：

npm run build:dev

  測試的打包命令：

npm run build:test