vue脚手架项目使用cross-env分环境打包

一般的实现方式

//常规的做法
let mode="dev"; //可以设置：dev、test、prod
let baseUrl="";

if(mode=="dev"){
  baseUrl=="http://www.xx.com";
}else if(mode=="test"){
  baseUrl=="http://www.xxtest.com";
}else {
  baseUrl=="http://www.xxprod.com";
}

export {
  baseUrl
}

这种做法基本需求是实现了，如果做持续集成，代码在本地跑成功没有bug以后，上传源码到服务器通过执行脚本直接编译打包，这个时候上面的这种常规做法显然就行不通了。

使用cross-env第三方库实现

cross-env官方的介绍是：跨平台环境脚本的设置，你可以通过一个简单的命令（设置环境变量）而不用担心设置或者使用环境变量的平台。

1. 安装依赖npm install --save-dev cross-env
2. 添加test.env.js文件
3. 修改prod.env.js文件

module.exports = {
  NODE_ENV: '"production"',
  ENV_CONFIG:'"prod"'
};

4. 修改build目录下webpack.prod.conf.js文件

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

5. 修改config目录下index.js文件

build: {
    //添加下面两行代码
    prodEnv: require('./prod.env'),
    testEnv: require('./test.env'),
    // Template for index.html
    index:
      path.resolve(__dirname, '../dist/index.html'),
    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    ...................  
}

6. 修改build目录下build.js文件

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

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'
    ))
  })
})

7. 修改package.json文件

"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=testing env_config=test node build/build.js", 
    "build--prod": "cross-env NODE_ENV=production env_config=prod node build/build.js"
  },

8. 在src下面创建common/js 目录下的config.js文件

if (process.env.NODE_ENV == 'development') {
  baseUrl = "开发环境接口地址http://www.xx.com";
} else if (process.env.NODE_ENV == 'production') {
  baseUrl = "正式环境接口地址http://www.xxprod.com";
} else if (process.env.NODE_ENV == 'testing') {
  baseUrl = "测试环境接口地址http://www.xxtest.com";
}

9. 配置全局请求接口 （我在这用的是axios）在main.js中

import baseUrl from './common/js/config'
axios.defaults.baseURL = baseUrl.baseUrl; //测试接口地址
Vue.prototype.$axios = axios

用法

this.$axios
      .post("接口地址例如（/test）", 需要传的参数, { 请求头例：（headers: { token: this.tokenValues }） })
      .then(res => {
        
      });

ps备注
　有时候，正式环境的地址是：http://www.xx.com。在弄测试环境的时候为了简化，后端同学就直接用nginx做一个重定向，然后就有了测试环境地址:http://www.xx.com/test/index.html。 在这个时候webpack的配置文件中，就要根据具体情况作出修改，否则部署以后页面就会空白，因为编译后的资源文件找不到了
在webpack.base.conf.js文件中，要根据具体情况作出修改。

let assetPublicPath;
if (process.env.env_config == 'test') {
  assetPublicPath='/test/'
}else if(process.env.env_config == 'prod'){
  assetPublicPath=config.build.assetsPublicPath;
}else{
  assetPublicPath=config.dev.assetsPublicPath;
}