自学内容网 自学内容网
自学内容网 > 正文

vue3配置代理

🕗 发布于 2024-07-18 14:21 java  vue.js  vue  idea  vscode  

vite.config.js中的内容：

在这里配置访问后台的地址

在这里插入图片描述

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  server: {
    open: false,
    port: 3000,
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:9001', // 后台地址
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      },
    },

  },

})

一般都是再utils中创建axios：

看图

在这里插入图片描述

const baseURL = import.meta.env.VITE_MODE==='development' && import.meta.env.VITE_APP_TEST_MODE * 1 === 0 ? '/api/metal' : '/metal'
// 1. 创建axios实例
console.log(import.meta.env)
const instance = axios.create({
  // 接口
  baseURL: baseURL,
  // 超时时间
  timeout: 50000,
});

在根目录下创建俩文件(直接 就是new file) (text)：

看图

在这里插入图片描述

.env.development
在这里插入图片描述

VITE_MODE=development
VITE_APP_TEST_MODE=0
# 是否全量引入element-plus样式
VITE_USE_ALL_ELEMENT_PLUS_STYLE=true

.env.test
在这里插入图片描述

VITE_MODE=testServer
VITE_APP_TEST_MODE=0

最后打包使用 npm run build 或者本地启动npm run dev 就可以了 (看自己配置的是什么)
在package.json中
在这里插入图片描述


原文地址：https://blog.csdn.net/weixin_45959518/article/details/140467083

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

相关文章

  • 「QT」文件类 之 QTemporaryDir 临时目录类

    QTemporaryDir类是Qt框架中用于创建和管理临时目录的类。它提供了一个便捷且安全的方式来生成唯一的临时目录，这些目录通常用于存储临时文件或子目录，以便在程序运行期间进行临时存储或处理。QTe

    阅读更多2024-11-16
  • 【c++笔试强训】（第五篇）

    因此，Fibonacci数列就形如：0, 1, 1, 2, 3, 5, 8, 13, ...，在Fibonacci数列中的数我们称为Fibonacci数。给你一个N，你想让其变为一个Fibonacci

    阅读更多2024-11-16
  • vue2 动态路由的实现

    一般情况下，路由都是前端约定好的，但是每当项目发布上线，或者客户需求新的页面的时候，都需要做出路由改变。这样运维就可以现场支持，方便做出可操作的中户中台，来管理我们的中心项目登录及权限，路由等方面；注

    阅读更多2024-11-16
  • 算法导论第二章

    从今天开始会陆续更新关于算法导论的啃书相关文章，先从前往后而且比较常用的章节开始讲起，所以可能会有部分不怎么用的着的章节会跳过。由于第一章没讲什么具体内容，所以选择跳过从第二章开始讲起。

    阅读更多2024-11-16
  • 生成式GPT商品推荐：精准满足用户需求

    随着人工智能（AI）技术的飞速发展，电商平台正在逐步迎来一场前所未有的变革。尤其是生成式GPT（Generative Pre-trained Transformer）技术的应用，正在重新定义电商平台如

    阅读更多2024-11-16
  • 【机器学习基础】西瓜书阅读笔记task01

    机器学习：研究如何通过计算的手段，利用经验来改善系统自身的性能计算机系统中，经验通常以数据形式存在。机器学习研究的主要内容：计算机从数据中产生模型的算法，即“学习算法”把经验（经验数据）提供给这个算法

    阅读更多2024-11-16
  • 卷积神经网络之Yolo详解

    IoU用于衡量预测框与真实框的重叠程度，是目标检测中的基础评估指标。置信度反映了模型对于其预测框包含物体的信心。精确率衡量了预测为目标的框中，实际是目标的比例。召回率衡量了模型能够找到的真实目标的比例

    阅读更多2024-11-16
  • ssm092基于Tomcat技术的车库智能管理平台+jsp(论文+源码)_kaic

    它将程序数据通过使用不同的数据表格进行保存，在增加了程序数据的存储速度的时候，也提高了数据库的灵活性。当前需要开发的程序软件是根据当下的用户需求进行设计开发的，但是随着时间的推移，社会大环境的改变，开

    阅读更多2024-11-16
  • vue3初始项目结构与分析

    时隔多年再次学习vue，单纯学习刚创立好的项目分析其结构与运作方式，掌握了基础才能在工作中延申。

    阅读更多2024-11-16
  • 理解 C++ 中的 `const` 关键字

    const关键字在 C++ 中的使用是良好的编程实践。它能提高代码的安全性、可读性，并帮助优化编译器的性能。为了防止逻辑错误和性能问题，建议在可能的情况下尽量使用const。通过对比其他编程语言，可以

    阅读更多2024-11-16
自学内容网
Copyright © 2015-2024