vue分别打包测试环境和正式环境

vue打包时使用不同的环境变量

需求

同一个项目通过打包使用不同的环境变量，目前的环境有三个：
一、本地------开发环境
二、线上------测试环境
三、线上------正式环境
我们都知道vue默认的打包都是生产模式，所以说打包后的都是线上的东西，现在我们解决一下如何通过不同命令的打包方式使用不同的环境变量。

安装cross-env

npm install cross-env --save-dev

config目录,新增test.env.js，文件目录如下

config

index.js

dev.env.js

prod.env.js

test.env.js

修改 prod.env.js

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  EVN_CONFIG:'"prod"',
  TITLE:'"正式环境title"',
}

修改 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"',
  TITLE:'"开发环境title"',
})

修改 test.env.js

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  EVN_CONFIG:'"test"',
  TITLE:'"测试环境title"',
}

修改config/index.js,修改build那一部分的代码，其他不变

build: {
    // 添加test、prod环境变量配置
    prodEnv: require('./prod.env'),
    testEnv: require('./test.env'),    //如果需要通过打包不同的环境变量，打包到不同的文件夹可以这样写,注意用了此处代码需要注释点下面的index和assetsRoot这两个配置
    // index: path.resolve(__dirname, '../' + process.env.EVN_CONFIG + '_dist/index.html'),
    // assetsRoot: path.resolve(__dirname, '../' + process.env.EVN_CONFIG + '_dist'),    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),
    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),    assetsSubDirectory: 'static',
    assetsPublicPath: '/',    /**
     * Source Maps
     */    productionSourceMap: true,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }

修改build/build.js,注释process.env.NODE_ENV = ‘production然后修改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.EVN_CONFIG+ ' mode...' )
spinner.start()rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
  if (err) throw err
  webpack(webpackConfig, (err, stats) => {
    spinner.stop()
    if (err) throw err
    process.stdout.write(stats.toString({
      colors: true,
      modules: false,
      children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
      chunks: false,
      chunkModules: false
    }) + '\n\n')    if (stats.hasErrors()) {
      console.log(chalk.red('  Build failed with errors.\n'))
      process.exit(1)
    }    console.log(chalk.cyan('  Build complete.\n'))
    console.log(chalk.yellow(
      '  Tip: built files are meant to be served over an HTTP server.\n' +
      '  Opening index.html over file:// won\'t work.\n'
    ))
  })
})

修改build/webpack.prod.conf.js,注释const env = require(‘../config/prod.env’) 新增如下代码

const env = config.build[process.env.EVN_CONFIG+'Env']

修改package.json,build:test打包测试环境，build:prod打包正式环境

"scripts": {
  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  "build:test": "cross-env NODE_ENV=production EVN_CONFIG=test node build/build.js",
  "build:prod": "cross-env NODE_ENV=production EVN_CONFIG=prod node build/build.js"
 },

运行打包命令即可，如果需要输出到不同的目录可以参考上面修改config/index.js这一块的代码

测试环境：npm run build:test
正式环境：npm run build:prod

最后部署到线上，可以通过在页面上打印process.env是否在不同的环境使用了不同的环境变量，如果按我的步骤写基本上是不会出问题的。有问题下方留言。

为了方便大家测试，可以打包后这样子做。

#如果没有安装live-server,可以先安装npm install -g live-server#然后进入你打包的那个文件夹默认是dist,打开命令行
live-server会自动启动服务，然后就能直接看到效果