VUE配置proxy代理的開發(fā)測試及生產(chǎn)環(huán)境

更新時間：2023年08月21日 10:45:03 作者：柯柯的呵呵噠

這篇文章主要為大家介紹了VUE配置proxy代理的開發(fā)環(huán)境、測試環(huán)境、生產(chǎn)環(huán)境詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪

不同環(huán)境下統(tǒng)一跨域問題解決

前端開發(fā)過程中，我們經(jīng)常會碰到跨域的問題，下面我們來配置下，不同的環(huán)境下，統(tǒng)一的跨域問題解決。

1、根目錄下新建三個環(huán)境的配置文件

.env.development（開發(fā)環(huán)境）

.env.test（測試環(huán)境）

.evn.production（生產(chǎn)環(huán)境）

如圖：

2、開發(fā)環(huán)境 .env.development

# 開發(fā)環(huán)境
NODE_ENV = 'development'

# 開發(fā)環(huán)境，api前綴
VUE_APP_BASE_API = '/api'

#開發(fā)環(huán)境，Url地址
VUE_APP_BASE_RUL = 'http://xxxxxxxxxxxxx:8081/

測試環(huán)境 .env.test

# 測試環(huán)境
NODE_ENV = 'test'

# 測試環(huán)境，api前綴
VUE_APP_BASE_API = '/test-api'

#測試環(huán)境，Url地址
VUE_APP_BASE_RUL = 'http://xxxxxxxxxxx:8081/'

生產(chǎn)環(huán)境 .env.production

# 生產(chǎn)環(huán)境
NODE_ENV = 'production'

# 生產(chǎn)環(huán)境，api前綴
VUE_APP_BASE_API = '/prod-api'

#生產(chǎn)環(huán)境，Url地址
VUE_APP_BASE_RUL = 'http://xxxxxxxxxx:8081/'

說明：proxy在服務器中會失效，所以，需要再服務器中配置nginx，不然，會出現(xiàn)404錯誤

3、vue.config.js 配置

// webpack-dev-server 相關(guān)配置
    devServer: { // 設(shè)置代理
        host: '0.0.0.0', //
        port: 80, //自定義端口
        https: false, //false關(guān)閉https，true為開啟
        open: true, //自動打開瀏覽器
        proxy: {
            [process.env.VUE_APP_BASE_API]: { //同濟醫(yī)院地址
                target: process.env.VUE_APP_BASE_RUL,
                // 如果要代理 websockets
                ws: true,
                changeOrigin: true,
                pathRewrite: {   //重寫路徑，這種是沒有我們定義的前綴
                    ['^' + process.env.VUE_APP_BASE_API]: '' 
                }
            }
        }
    },

4、axios 配置baseURL

baseURL: process.env.VUE_APP_BASE_API

5、package.json 配置打包、啟動

（json不可以再備注，我是為了方便理解）

"serve": "vue-cli-service serve",    //啟動
"build:test": "vue-cli-service build --mode test",   //測試
"build:prod": "vue-cli-service build",   // 生產(chǎn)

以上就是VUE配置proxy代理的開發(fā)測試及生產(chǎn)環(huán)境的詳細內(nèi)容，更多關(guān)于VUE配置proxy代理環(huán)境的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: