Vue2 不同命令下项目启动和打包到指定的API接口环境进行配置

 只需五步配置完成

本地项目启动命令使用：npm run dev，npm run dev_test、npm run dev_prod

打包环境命令使用：npm run build，npm run build test、npm run build prod

 

配置分‘本地运行’ 和 ‘打包运行’ 两个文件：我们先看本地运行配置命令到指定的环境下

 

 

本地运行

config/dev.env.js 文件在本地运行时 读取的

打包运行

config/prod.env.js文件在执行打包命令时 读取的

注意：下面使用到的process 对象是一个全局变量，它提供当前 Node.js 进程的有关信息，以及控制当前 Node.js 进程

1.找到config/dev.env.js 修改如下

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
const URL = require('../src/utils/baseURL.js')
let params = process.argv[4]
let baseUrl = ''
let environment = null
switch (params) {
  // 本地环境
  case '--config':
    environment = "'本地环境'"
    baseUrl = `"${URL.local}"`
    break
  // 开发环境
  case '--env=test':
    environment = "'开发环境'"
    baseUrl = `"${URL.development}"`
    break
  // 生产开发
  case '--env=prod':
    environment = "'生产环境'"
    baseUrl = `"${URL.baseURL}"`
    break
  // 其他
  default:
    environment = "'其他'"
    baseUrl = `"${URL.otherUrl}"`
}
// 本地开发
module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  baseUrl: baseUrl,
  local:true,
  environment: environment
})

 

2.找到config/prod.env.js修改如下

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
const URL = require('../src/utils/baseURL.js')
let params = process.argv[2]
let baseUrl = ''
let environment = null
switch (params) {
  case '--inline':
    environment = "'本地环境'"
    baseUrl = `"${URL.local}"`
    break
  case 'test':
    environment = "'开发环境'"
    baseUrl = `"${URL.development}"`
    break
  case 'prod':
    environment = "'生产环境'"
    baseUrl = `"${URL.baseURL}"`
    break
  default:
    environment = "'其他'"
    baseUrl = `"${URL.otherUrl}"`
}
// 打包环境
module.exports = merge(prodEnv, {
  NODE_ENV: '"production"',
  baseUrl: baseUrl,
  local:false,
  environment: environment
})

 

3.main.js获取环境并且 注册挂载vue原型上

// 注册全局域名接口调用
Vue.prototype.$baseUrl = process.env.baseUrl
// 注册当前运行或者打包的是什么环境下的
Vue.prototype.$Environment = process.env.environment

4.创建文件src/utils/baseURL.js(注意这里要改成你接口请求的对应的ip或者域名地址)

module.exports={
  local:'我是本地环境',//本地环境(一般是连接后端主机ip进行本地调试)
  development:'我是开发环境',// 开发环境(一般是连接测试服务器ip地址)
  baseURL:"我是生产环境",//生产环境(一般是线上正式发版的ip地址)
  otherUrl:'我是其他环境' // 其他环境（其他请求ip地址）
}

5.找到 package.json     scripts属性对象修改下面这样

  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "dev_test": "webpack-dev-server --inline --progress --env=test --config build/webpack.dev.conf.js",
    "dev_prod": "webpack-dev-server --inline --progress --env=prod --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
  },

提示：第4步要改成你对应的服务器请求ip或者域名地址

 

完成以上

本地项目启动命令使用：npm run dev，npm run dev_test、npm run dev_prod

打包环境命令使用：npm run build，npm run build test、npm run build prod

 提示：process.env.baseUrl和process.env.environment变量可以在任意页面和组件中使用和访问

console.log( process.env.environment) // 获取当前是什么开发环境

可以通过process.env.local 布尔值来判断 当前是本地开发访问 还是线上访问，可以对请求封装和反向代理做一些区别和逻辑

 

 我是马丁的车夫，欢迎转发收藏！