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

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

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

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

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

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

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

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

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

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

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

如下提供一種解決方案

首先在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",

在項(xiàng)目根目錄添加兩個(gè)文件

.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'

在項(xiàng)目中使用參數(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)境

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

例如：

{
? "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)的運(yùn)行命令就是：

npm run mybuild
npm run myserve

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

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

運(yùn)行截圖如下：

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

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

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

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

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

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