vue-cli-service build 環(huán)境設(shè)置方式

更新時間：2023年01月11日 09:53:13 作者：lambertLin

這篇文章主要介紹了vue-cli-service build 環(huán)境設(shè)置方式，具有很好的參考價值，希望對大家有所幫助。

vue-cli-service build 環(huán)境設(shè)置

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

npm run serve 時會把process.env.NODE_ENV設(shè)置為‘development’；
npm run build 時會把process.env.NODE_ENV設(shè)置為‘production’；

此時只要根據(jù)process.env.NODE_ENV設(shè)置不同請求url就可以很簡單的區(qū)分出本地和線上環(huán)境。

頭疼的是打包時線上環(huán)境可能分多種，比如測試環(huán)境和生產(chǎn)環(huán)境等等。

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

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

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

如下提供一種解決方案

首先在package.json文件內(nèi)添加測試環(huán)境和生產(chǎn)環(huán)境的打包指令：

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

在項目根目錄添加兩個文件

.env.alpha

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

.env.prod

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

在項目中使用參數(shù)：

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

注：

—mode后面添加test、production 等預(yù)留參數(shù)無效
配置文件內(nèi)，參數(shù)添加VUE_APP 可通過調(diào)試

vue-cli的vue-cli-service命令的默認(rèn)環(huán)境

在運行或者打包Vue項目時，我們常用的命令是：npm run build，npm run serve等樣式。其中build和serve是在vue項目的package.json中進(jìn)行定義，是一個腳本。

例如：

{
? "name": "test02",
? "version": "0.1.0",
? "private": true,
? "scripts": {
? ? "serve": "vue-cli-service serve",
? ? "build": "vue-cli-service build",
? ? "lint": "vue-cli-service lint"
? },

在上面的腳本定義中，server、build等是可以按照自己的方式進(jìn)行命名的，例如myserver、mybuild，對應(yīng)的運行命令就是：

npm run mybuild
npm run myserve

上面的命令本質(zhì)上是下面的命令，都可以在命令行方式下運行：

vue-cli-service serve
vue-cli-service build

運行截圖如下：

下面講一下vue-cli-service serve和vue-cli-service build的默認(rèn)環(huán)境，因為曾經(jīng)遇到出現(xiàn)一個問題：項目中有一個環(huán)境參數(shù)文件.env.development。在WebStorm中運行npm run serve，前后端是通的。

但是當(dāng)運行npm run build打包部署到Apache Server中后，前后端是不通的。

檢查后發(fā)現(xiàn)原因是上面兩個命令默認(rèn)的環(huán)境是不一樣的，看下面兩個運行截圖就知道了：

第一個腳本默認(rèn)對應(yīng)的是development環(huán)境，第二個腳本默認(rèn)對應(yīng)的是production環(huán)境（沒有對應(yīng)的環(huán)境設(shè)置文件也不影響，有對應(yīng)的環(huán)境設(shè)置文件就用文件里面設(shè)置的參數(shù)）。

如果不注意這點，就會出現(xiàn)部署后運行情況和沒有部署運行情況不一致的情況，其背后的原因就是默認(rèn)環(huán)境。

如何修改每個腳本對應(yīng)的環(huán)境？非常簡單，直接在package.json文件中修改。