vue 多环境配置

实际情况下我们用vue-cli脚手架生成的项目，可能部署在不同环境下运行，如开发环境、测试环境、生产环境；那接口地址等可能有所改变，我们不能每次手动修改文件里的地址。我们可配置多环境打包来实现

1. package.json添加test打包命令

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "unit": "jest --config test/unit/jest.conf.js --coverage",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e",
    "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
    "build": "node build/build.js",
    "testing": "node build/build-test.js" 
  },

2. 复制build文件夹下的build.js文件，命名为build-test.js，修改文件中下面标注的地方

'use strict'
require('./check-versions')()
// 修改此处 
process.env.NODE_ENV = 'test'

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.test.conf')
// 修改此处
const spinner = ora('building for test...')
spinner.start()

3. 复制build文件夹下的webpack.prod.conf.js文件，命名为webpack.test.conf.js，修改文件中下面标注的地方

'use strict'
const path = require('path')
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
// 修改此处
const env = require('../config/testing.env')

4. 复制config文件夹下的prod.env.js文件。命名为testing.env.js

'use strict'
module.exports = {
  NODE_ENV: '"test"'
}

5. 修改build文件夹下的vue-loader.conf.js文件和webpack.base.conf.js文件

vue-loader.conf.js

'use strict'
const utils = require('./utils')
const config = require('../config')
// 修改此处
const isProduction = process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'test'
const sourceMapEnabled = isProduction
  ? config.build.productionSourceMap
  : config.dev.cssSourceMap

module.exports = {
  loaders: utils.cssLoaders({
    sourceMap: sourceMapEnabled,
    extract: isProduction
  }),
  cssSourceMap: sourceMapEnabled,
  cacheBusting: config.dev.cacheBusting,
  transformToRequire: {
    video: ['src', 'poster'],
    source: 'src',
    img: 'src',
    image: 'xlink:href'
  }
}

webpack.base.conf.js

output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    // 修改此处
    publicPath: process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'test'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },

6. main.js 配置参数

// 根据运行环境指定api地址
let api = null
if(process.env.NODE_ENV === 'development'){  // 开发环境
  	api = 'http://开发环境地址'
}else if(process.env.NODE_ENV === 'test'){  // 测试环境
	api = 'http://测试环境地址'
}else if(process.env.NODE_ENV === 'production'){  // 生产环境
	api = 'http://生成环境地址'
}
// 指定axios的baseurl
axios.defaults.baseURL = api;

7. 项目启动打包命令

npm run testing