通過vue-cli腳手架構(gòu)建出一個前端項目，通過npm run build打包，發(fā)布到線上，但是這樣做需要每次都手動修改接口地址。我們可以通過自行配置打包命令實現(xiàn)無需修改接口地址，打各個環(huán)境的包。

文檔結(jié)構(gòu)大致如下圖：

1.找到config文件夾下的dev.env.js，將其修改成如下圖所示：

注：這里BASE_API： '/api'，是做了一個代理配置，主要解決跨域問題的，如果有不懂的可以看看我之前的文章前端開發(fā)問題集：遇到跨域問題怎么辦，這么解決就行了

2.在config文件夾下創(chuàng)建一個test.env.js,在test.env.js中添加代碼如下圖所示：

3.然后修改prod.env.js中的內(nèi)容，如下圖所示：

4.找到項目中設(shè)置axios基本配置的文件，將baseURL的參數(shù)配置成process.env.BASE_API，如下圖所示：

5.對build中webpack.prod.conf.js，找到 const env = require('../config/prod.env')，將其修改為const env = config.build[process.env.env_config+'Env']

6.修改config文件夾下的index.js,找到build:

7.使用npm install cross-env –save-dev命令安裝 cross-env

8.找到build文件夾下的build.js

將process.env.NODE_ENV = 'production'和 const spinner = ora('building for production...')注釋，并將引用了spinner的地方也一并注釋。

9.修改package.json文件，修改script中內(nèi)容

添加"test": "cross-env NODE_ENV=test env_config=test node build/build.js"

修改build, 改為"build": "cross-env NODE_ENV=production env_config=production node build/build.js"

測試環(huán)境打包命令： npm run test

正式環(huán)境打包命令： npm run build

這樣就可以實現(xiàn)分環(huán)境打包了,修改完之后，以后再要對不同環(huán)境進行打包時，不需要每次打包都要去修改一次接口地址了，是不是很方便了呢~

如有錯誤，歡迎指正~

碼字不易，求關(guān)注~求轉(zhuǎn)發(fā)~~~

總結(jié)

以上是生活随笔為你收集整理的react不同环境不同配置angular_前端问题集：vue配置环境-给不同的环境配不同的打包命令...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。