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) 可以看控制台知道当前环境配置具体是那些

 

 

 

我是马丁的车夫，欢迎转发收藏！