Vue3 解決跨域 配置反向代理，命令環境配置 (4步完成 全網最詳細)

 

1.項目根目錄創建環境變量代碼和指定文件

項目根目錄創建下面的文件

本地運行測試環境

1) .env.dev_test 

# 測試環境
NODE_ENV = 'development'

# 測試環境，api前綴
VUE_APP_BASE_API = '/api'

#測試環境，Url地址
VUE_APP_BASE_RUL = 'https://www.baidu.com/'

本地測試運行(用於連接后端主機ip本地調試代碼)

2) .env.development

# 開發環境
NODE_ENV = 'development'

# 開發環境，api前綴
VUE_APP_BASE_API = '/api'

#開發環境，Url地址
VUE_APP_BASE_RUL = 'https://www.baidu.com/'

打包測試環境

3) .env.prod_test

# 生產測試環境
NODE_ENV = 'production'

# 生產測試環境，api前綴
VUE_APP_BASE_API = '/test_api'

#測試環境，Url地址
VUE_APP_BASE_RUL = 'http://xxxxxxxxxxx:8081/'

打包正式線上發布環境

4) .env.production

# 生產正式環境
NODE_ENV = 'production'

# 生產正式環境，api前綴
VUE_APP_BASE_API = '/api_production'

#生產環境，Url地址
VUE_APP_BASE_RUL = 'https://www.baidu.com/'

 最終是這樣的結構

 

 

2.項目根目錄創建vue.config.js（有就添加，沒有就創建） 配置反向代理解決跨域添加下面的代碼

當前配置可以解決請求跨域 和打包頁面白板

module.exports = {
  devServer: { // 設置代理
    host: '0.0.0.0', //
    port: 8080, //自定義端口
    https: false, //false關閉https，true為開啟
    open: false, //自動打開瀏覽器
    proxy: {
      [process.env.VUE_APP_BASE_API]: { 
        target: process.env.VUE_APP_BASE_RUL, // 代理的線上的接口地址
        // 如果要代理 websockets
        ws: true,
        changeOrigin: true,
        pathRewrite: {   //重寫路徑，這種是沒有我們定義的前綴
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    }
  },
  publicPath: "./" 
}

 

 

3.封裝axios 配置環境變量 讓請求本地運行的時候走代理服務器 發布線上的時候同時也可以兼容

src/utils/request.js

import axios from 'axios'

const service = axios.create({
    baseURL:  process.env.NODE_ENV==='development'?process.env.VUE_APP_BASE_API:process.env.VUE_APP_BASE_RUL, // api 的 base_url
    timeout: 5000 // request timeout
})

// 不需要token驗證的 接口白名單
// const APIWhite = ['users/login']


// 請求攔截  設置統一header
service.interceptors.request.use(

    config => {
        
        return config;
    },
    error => {
        return Promise.reject(error)
    }
)
// 響應攔截  401 token過期處理
service.interceptors.response.use(
    response => {
        
        return response
    },
    error => {
        return Promise.reject(error)
    }
)

export default service

 

api封裝管理

src/api/index.js

import request from '@/utils/request'
// 登錄
export function doLogin (data) {
    return request({url: '/users/login',method: 'POST', data})
}

 

4.package.json 對npm腳本 啟動配置修改 

  "scripts": {
    "serve": "vue-cli-service serve",
    "dev_test": "vue-cli-service serve --mode dev_test",
    "build:test": "vue-cli-service build --mode prod_test",
    "build:prod": "vue-cli-service build"
  },

npm run serve // 本地運行后端主機IP本地調試環境

npm run dev_test // 本地運行測試環境

npm run build:test // 打包測試環境

npm run build:prod //打包線上正式發布環境

 

在頁面使用 :

console.log(process.env) 可以看控制台知道當前環境配置具體是那些

 

 

 

我是馬丁的車夫，歡迎轉發收藏！