vue实现分环境打包步骤,配置编译环境和线上环境之间的切换-CFANZ编程社区

1.要确定安装了cross-env

npm install cross-env –save-dev

2.修改各环境下的参数，在 config 目录下添加 test.env.js，并修改dev.env.js, prod.env.js,修改后内容如下
test.env.js

'use strict'
module.exports = {
  NODE_ENV: '"testing"',
  EVN_CONFIG:'"test"',
  API_ROOT:'"http://127.0.0.1:5003"'
}

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"',
  API_ROOT: '"http://192.168.1.69:5000"'
})

prod.env.js

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  EVN_CONFIG: '"prod"',
  API_ROOT: '"http://192.168.1.69:5000"'
}

3.修改 package.json 文件中的 scripts 内容.(NODE_ENV最好都设成 production，因为在 utils.js 只做了production 一种判定)

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "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"
  },

发布到test环境运行npm run build-test；发布到生产环境运行npm run build-prod;其他环境可根据此做类似配置

4.修改 config/index.js 文件中 build 参数，这里的参数会在 build/webpackage.prod.conf.js 中使用到

build: {
    // Template for index.html
        // 添加test  prod 环境的配制
        prodEnv: require('./prod.env'),
        testEnv: require('./test.env'),  
}

5.对 build/webpackage.prod.conf.js 文件进行修改，调整 env 常量的生成方式。

// 个性env常量的定义
// const env = require('../config/prod.env')
const env = config.build[process.env.env_config+'Env']

在这里插入图片描述
6.修改 build/build.js 文件
删除 process.env.NODE_ENV 的赋值，修改 spinner 的定义，调整后的内容如下：

// 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()

在这里插入图片描述
7.在网络请求处，设置baseUrl

 baseURL: process.env.API_ROOT

在这里插入图片描述