vue如何按照环境打包项目?如何在vue文件中使用process.env?

区分线上环境、测试环境、XX环境打包， 如果有不正确的或者其他建议，请留言说明

一、根据环境变量配置BASE_URL

修改config/prod.env.js文件如下：

'use strict'
// 可配置一个默认的环境prod，这样运行npm run build 默认就是prod的环境
let buildType = process.argv.slice(2)[0] || 'prod' 
/**
 * 这里是为了把开发环境区分开
 * 看一下开发环境的命令："dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
 * 具体情况根据自己的命令来，总之区分开开发环境即可，也可以写成"dev": "webpack-dev-server development ......."
 */
if (process.argv.slice(2)[0] == '--inline') return
console.log('------strat build------' + buildType)
let BASE_URL
switch (buildType) {
  case 'prod':  // 线上环境打包命令 npm run build
    BASE_URL = 'https://www.123123.com:10104'
    break
  case 'test':  // 测试环境打包命令 npm run build test
    BASE_URL = 'http://192.168.1.189:10425'
    break
  case 'xxx': // npm run build xxx
    BASE_URL = 'https://www.12343.com:10107'
    break
  default:
    BASE_URL = 'https://www.123123.com:10104'
    break
}
module.exports = {
  NODE_ENV: '"production"',
  BASE_URL: JSON.stringify(BASE_URL),// 这里需要转为字符串，不然其他文件中获取会得到变量的形式
}

修改config/dev.env.js文件如下：

"use strict";
if (process.argv.slice(2)[0] != '--inline') return
let BASE_URL = '/api' //本立proxy代理的前缀
console.log('------strat dev------')
module.exports = {
  NODE_ENV: '"development"',
  BASE_URL: JSON.stringify(BASE_URL)
}

---

• 关于process.argv这个变量：

1. 第一个元素process.argv[0]——返回启动Node.js进程的可执行文件所在的绝对路径
2. 第二个元素process.argv[1]——为当前执行的JavaScript文件路径
3. 剩余的元素为其他命令行参数

也就是说，如果我运行npm run build test命令，那么process.argv.slice(2)[0]得到的就是字符串test，前提是我的package.json文件中的命令没有去做其他的更改，如果你是用了其他的插件，请根据情况修改

image.png

---

• 修改打包时命令行提示
  修改build/build.js文件如下：
  
  image.png

// 增加下面这一行
let buildType = process.argv.slice(2)[0];

// spinner修改如下
const spinner = ora("building for " + buildType + "...");

---

二、获取环境变量前提条件（配置插件）

• process.env:
  process对象是全局变量，它提供当前node.js的有关信息，以及控制当前node.js的有关进程。因为是全局变量，它对于node应用程序是始终可用的，无需require()。
  既然process都是一个对象了，env自然是它的一个属性，这个属性返回包含用户环境信息的对象。在终端输入node后，在输入process.env可以看到打印出来的信息。

但是这还不够，process.env是node中的环境变量，在模块中是无法直接拿到的，比如.js、.vue，还需要配置一下DefinePlugin

• DefinePlugin:
  DefinePlugin可以定义一些全局变量，让我们在模块当中直接使用，不用做任何声明。
  如下：
  webpack.dev.conf.js

plugins: [
    ...
    new webpack.DefinePlugin({
      'process.env': require('../config/dev.env')
    }),
    ...
   ]

webpack.prod.conf.js

plugins: [
    ...
    new webpack.DefinePlugin({
      'process.env': require('../config/prod.env')
    }),
    ...
   ]

三、配置项目请求地址（BASE_URL）

到现在为止，我们可以根据打包命令的不同，所配置的BASE_URL不同， 直接在axios封装文件中获取即可：

const request = axios.create({
  baseURL: process.env.BASE_URL
})

在vue文件中使用的获取方式相同