vue-cli根據不同的命令自動切換不同環境地址

本文轉載自查看原文 2020-07-20 08:30 1271 vue

前言

我們再使用vue腳手架開發項目時，不可避免的涉及到多個環境來回切換接口調用地址的問題，在開發環境中可能會通過 ip 來訪問后台接口，但是當項目上線后就要把對用的接口地址換成生產環境的地址，肯定不能再用 ip 來調用，因此我們每次打包發布的時候都要更改相關配置，非常痛苦，今天我們一起來通過代碼的方式實現輸入不同的命令自動配置不同的環境地址

第一步：搭建vue腳手架，不會的請點擊這里，搭建完成之后我們拿到了一個完整的項目

第二步：新建 src -> util -> env.json 文件，文件內不需要寫任何內容

第三步：在項目目錄根節點，即和 packge.json 文件同級，新建 vue.config.js

第四步：在 vue.config.js 文件中添加如下代碼，代碼中有詳細的注釋，不懂可以百度

// 引入 node 自帶的操作文件的插件 fs
const fs = require("fs")

module.exports = {
  configureWebpack: () => {
    // writeFileSync 是寫向文件寫入內容的方法
    // process.env 是vue的環境變量，是一個vue自帶的固定的參數
    // apiconfig 是在 package.json 中定義的一個變量名，可自定義
    // trim() 是為了去掉自動加到變量值上的空格
    fs.writeFileSync("./src/util/env.json", JSON.stringify({env: process.env.apiconfig.trim()}))
  }
}

第五步：修改 package.json -> scripts 節點中開發環境和生產環境地址的啟動命令

"serve": "set apiconfig=serve && vue-cli-service serve",

"build": "set apiconfig=build && vue-cli-service build",

注意：apiconfig=serve 和 apiconfig=build 中間不能有空格，否則運行會報錯，不信邪的朋友可以加上空格試一試；package.json 中定義的名稱要和 vue.config.js 中取值的字段一致

第六步：運行 npm run serve 或者 npm run build，查看env.json 文件內容是否發生變化

輸入 npm run serve 后打開 env.json 后發現自動寫入了內容

接着停掉項目輸入 npm run build 再查看 env.json

查看 env.json 發現輸入不同的命令，內容會自動改變

第七步：新建 src -> util -> api.js 文件作為項目的接口域名配置文件，並寫入如下演示代碼

const apiconfig = {
    // 開發環境
    "serve":{
        getUser:"http://192.168.0.0.1"
    },
    // 生產環境
    "build":{
        getUser:"https://www.xxxx.info.com"
    }
}
// 引入 env.json 文件
import env from "./env.json"
// 導出不同接口地址
export default apiconfig[env.env]