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,
  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,
  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) // 獲取當前是什么開發環境

 

 我是馬丁的車夫，歡迎轉發收藏！