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

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

相关文档可参考

需求

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

安装cross-env

npm install cross-env --save-dev

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

config的文件夹里 配置 添加test环境

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”’,
}

修改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,修改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/buuild.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'
    ))
  })
})

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

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