vue-cli3默認設置：

使用vue-cli3打包項目，通過配置不同的指令給項目設置不一樣的配置。

npm run serve時會把process.env.NODE_ENV設置為‘development’；

npm run build 時會把process.env.NODE_ENV設置為‘production’

此時只要根據process.env.NODE_ENV設置不同請求url就可以很簡單的區分出本地和線上環境。

頭疼的是打包時線上環境可能分多種，比如測試環境和生產環境等等。

---

配置多個環境：

在vue-cli2中打包時可以修改 “build” 和 “config”中的文件來區分不同的線上環境

而vue-cli3號稱0配置，無法直接修改打包文件，那么怎么區分不同的線上環境分別傳入不一樣的配置呢？

官網給我們做了簡單介紹（vue-cli-service-build）,但只解釋了現有幾個指令所匹配的模式,對于上面的需求顯然無法滿足。

如下提供一種解決方案：

（1）首先在package.json文件內添加測試環境和生產環境的打包指令：

"build-test": "vue-cli-service build --mode alpha","build-prod": "vue-cli-service build --mode prod",

（2）在項目根目錄添加兩個文件
.env.alpha

NODE_ENV = 'test'VUE_APP_BASE_URL = 'http://test.linbenjian.work'

.env.prod

NODE_ENV = 'production'VUE_APP_BASE_URL = 'http://www.linbenjian.work'

(3)在項目中使用
在項目中使用參數：

import axios from 'axios'let baseurl = process.env.VUE_APP_BASE_URL || 'http://localhost:9001'

注意點：

• —mode后面添加test、production 等預留參數無效
• 配置文件內，參數添加VUE_APP 可通過調試

（4）舉例說明

1- package.json添加 “alpha": "vue-cli-service build --mode alpha”

{···"scripts": {"serve": "vue-cli-service serve", //本地運行，會把process.env.NODE_ENV設置為‘development’"alpha": "vue-cli-service build --mode alpha", // 打包，會把process.env.NODE_ENV設置為步驟2中‘.env.alpha’文件設置的值。// 注意，這里 “--mode 名字“ 要和步驟2中文件名“.env.名字”名字保持一致"build": "vue-cli-service build" //打包， 會把process.env.NODE_ENV設置為‘production’},"dependencies": {··· },··· }

在項目根目錄添加文件“.env.alpha”，其內容：

NODE_ENV = ‘alpha‘

添加‘setBaseUrl.js’用來設置url（或者在vue.config.js 中設置），其內容：

let baseUrl: string = ""; //這里是一個默認的url，可以沒有 switch (process.env.NODE_ENV) {case 'development':baseUrl = "http://localhost:57156/" //這里是本地的請求urlbreakcase 'alpha': // 注意這里的名字要和步驟二中設置的環境名字對應起來baseUrl = "http://www.cnblogs.com/XHappyness/" //這里是測試環境中的urlbreakcase 'production':baseUrl = "https://www.cnblogs.com/XHappyness/p/7686267.html" //生產環境urlbreak }export default baseUrl;

4.在請求中引入設定的url，我這里用的是axiso，所以在axios的配置文件中引入并使用

import axios from 'axios' import baseUrl from './setBaseUrl.js'axios.defaults.withCredentials = true; axios.defaults.baseURL = baseUrl;····

總結

以上是生活随笔為你收集整理的vue-cli3 环境设置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。