vue-element-admin如何把mock换成使用真实后台接口

1)修改vue.config.js文件

'use strict'
const path = require('path')
const defaultSettings = require('./src/settings.js')function resolve(dir) {return path.join(__dirname, dir)
}const name = defaultSettings.title || 'vue Element Admin' // page title// If your port is set to 80,
// use administrator privileges to execute the command line.
// For example, Mac: sudo npm run
// You can change the port by the following method:
// port = 9527 npm run dev OR npm run dev --port = 9527
const port = process.env.port || process.env.npm_config_port || 9527 // dev port// All configuration item explanations can be find in https://cli.vuejs.org/config/
module.exports = {/*** You will need to set publicPath if you plan to deploy your site under a sub path,* for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,* then publicPath should be set to "/bar/".* In most cases please use '/' !!!* Detail: https://cli.vuejs.org/config/#publicpath*/publicPath: '/',outputDir: 'dist',assetsDir: 'static',lintOnSave: process.env.NODE_ENV === 'development',productionSourceMap: false,devServer: {port: port,open: true,overlay: {warnings: false,errors: true},before: require('./mock/mock-server.js')},configureWebpack: {// provide the app's title in webpack's name field, so that// it can be accessed in index.html to inject the correct title.name: name,resolve: {alias: {'@': resolve('src')}}},chainWebpack(config) {// it can improve the speed of the first screen, it is recommended to turn on preload// it can improve the speed of the first screen, it is recommended to turn on preloadconfig.plugin('preload').tap(() => [{rel: 'preload',// to ignore runtime.js// https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],include: 'initial'}])// when there are many pages, it will cause too many meaningless requestsconfig.plugins.delete('prefetch')// set svg-sprite-loaderconfig.module.rule('svg').exclude.add(resolve('src/icons')).end()config.module.rule('icons').test(/\.svg$/).include.add(resolve('src/icons')).end().use('svg-sprite-loader').loader('svg-sprite-loader').options({symbolId: 'icon-[name]'}).end()config.when(process.env.NODE_ENV !== 'development',config => {config.plugin('ScriptExtHtmlWebpackPlugin').after('html').use('script-ext-html-webpack-plugin', [{// `runtime` must same as runtimeChunk name. default is `runtime`inline: /runtime\..*\.js$/}]).end()config.optimization.splitChunks({chunks: 'all',cacheGroups: {libs: {name: 'chunk-libs',test: /[\\/]node_modules[\\/]/,priority: 10,chunks: 'initial' // only package third parties that are initially dependent},elementUI: {name: 'chunk-elementUI', // split elementUI into a single packagepriority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or apptest: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm},commons: {name: 'chunk-commons',test: resolve('src/components'), // can customize your rulesminChunks: 3, //  minimum common numberpriority: 5,reuseExistingChunk: true}}})// https:// webpack.js.org/configuration/optimization/#optimizationruntimechunkconfig.optimization.runtimeChunk('single')})}
}

在vue.config.js文件中找到devServer,修改devServer的值

 注释掉 before: require('./mock/mock-server.js')

在下面添加一下代理信息

        # src/vue.config.js ,http://127.0.0.1:8000为后台接口的目标地址proxy: {[process.env.VUE_APP_BASE_API]: {target: `http://127.0.0.1:8000`,changeOrigin: true,pathRewrite: {["^" + process.env.VUE_APP_BASE_API]: ""}}},

2)修改src/main.js文件

在main.js文件中注释掉mock配置

#在src/main.js文件中注释掉mock配置
if (process.env.NODE_ENV === 'production') {const {mockXHR} = require('../mock')mockXHR()
}

注释 

/* if (process.env.NODE_ENV === 'production') {const {mockXHR} = require('../mock')mockXHR()
} */

替换src/api文件夹下接口中的地址,把mock模拟地址换成真实地址

export function login(data) {return request({// url: '/vue-element-admin/user/login', // mock地址url: '/admin/passport/login',method: 'post',data})
}

其他接口地址修改同上 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/227728.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Vue3-16-【v-model】 表单数据绑定

作用描述 v-model 指令,实现了 表单输入组件的值 与 js 中的变量的值的绑定关系。 当我们在页面上执行输入动作时,js中变量的值也会同步发生变化。表单不仅仅局限于输入框,其他的如 : 单选按钮,复选框,下拉…

数据结构面试题和题目解析

以下是一些数据结构的面试题和解析: 1. 什么是链表? 链表是一种线性数据结构,由一系列节点组成,每个节点包含数据部分和指向下一个节点的指针。链表的主要优点是插入和删除操作比较方便,但访问链表中的元素不如访问数组…

【INTEL(ALTERA)】 quartus SignalTap 逻辑分析器 – Nios® II 插件 无法检测 Nios® II/f 处理器内核

说明 使用 Nios II 插件将 Nios II/f 处理器内核节点添加到 SignalTap 逻辑分析器时,在 英特尔 Quartus Prime Pro Edition 软件 23.3 版中可能会出现此问题。 错误消息: 无法完成“添加带插件的节点”命令,因为在当前设计中找不到所选 IP。…

IDEA之设置项目包的结构层级为eclipse默认样式

idea默认项目包的结构层级如下: 想修改成eclipse默认的那种样式,设置步骤如下: 1.点击下图中红框图标进行设置 2.选择 Tree Appearance,取消勾选 Compact Middle Packages 3.勾选红框里的两个选项,Flatten Packages 和 Hide Empty Middle Pa…

DL Homework 11

由于好多同学问我要代码,但这两天光顾着考四六级了,所以只能今天熬夜先给赶出来,第一题先搁置,晚点补上,先写第二题 习题6-4 推导LSTM网络中参数的梯度, 并分析其避免梯度消失的效果 习题6-3P 编程实现…

KMP算法, 什么是KMP算法 ,暴力匹配 ,KMP算法实现

文章目录 KMP算法什么是KMP算法暴力匹配KMP算法实现 KMP算法 什么是KMP算法 KMP是Knuth、Morris和Pratt首字母的缩写,KMP也是由这三位学者发明(1977年联合发表论文)。 KMP主要应用在字符串的匹配,是一个解决模式串在文本串是否…

文章解读与仿真程序复现思路——电网技术EI\CSCD\北大核心《耦合碳-绿证-消纳量市场的日前电量市场交易交互式优化》

这个标题描述了一种优化模型或算法,用于在日前电量市场中耦合碳排放权市场、可再生能源绿色证书市场和消纳量市场进行交易的交互式优化。我将解析标题的关键词和概念: 日前电量市场:指的是电力市场中进行短期调度和交易的市场,其…

Idea maven打包时 报错 illegalArgumentException: Malformed \uxxxx encoding 解决方法

1 改变打包命令重新打包 在maven打包命令上加入 -e -X 2 找到报错类和方法 可以看到是 java.util.Properties#loadConvert类方法中有个throw new IllegalArgumentException( "Malformed \\uxxxx encoding."),在此打断点 3 以Debug方式重新运行maven…

SLAM算法与工程实践——相机篇:传统相机使用(1)

SLAM算法与工程实践系列文章 下面是SLAM算法与工程实践系列文章的总链接,本人发表这个系列的文章链接均收录于此 SLAM算法与工程实践系列文章链接 下面是专栏地址: SLAM算法与工程实践系列专栏 文章目录 SLAM算法与工程实践系列文章SLAM算法与工程实践…

死锁的预防、避免、检测和消除

一、预防死锁 1. 破坏互斥条件 2. 破坏不剥夺条件 3.破坏请求和保持条件 4.破坏循环等待条件 二、避免死锁 避免死锁的一种方法是使用银行家算法,它涉及到安全序列的概念。银行家算法是一种资源分配和死锁避免的算法,它确保系统能够分配资源而不会导致死…

STM32迪文屏图标控件保姆级教程

要主图的去末尾,末尾福利图在等着你~~~ 文章目录 前言 开发环境 二、使用步骤 1.添加图标控件 2.设置图标属性 3.图标库ICL文件生成 4.单片机程序编写 容易踩得坑 一、前言 本篇文章主要介绍了在DGBUS平台上使用图标变量的步骤。首先需要在DGBUS中添加一个图标变量控…

linux(centos7)mysql8.0主从集群搭建(两台机器)

docker安装:(转载)centos7安装Docker详细步骤(无坑版教程)-CSDN博客 环境信息 主数据库服务器:192.168.1.10 从数据库服务器:192.168.1.11 1. mysql8.0镜像下载 docker pull mysql:8.0.23 2.创建docke…

瑞萨单片机学习:RA4M3单片机 BOOTloader升级 跳转到主程序 主程序无法执行问题

背景: 使用瑞萨的RA4M3单片机编写BOOT引导程序进行测试,在BOOT程序跳转到主程序时,主程序无法执行。本文介绍了问题的定位和解决方法。 运行开发环境介绍 硬件环境 RA4M3 官方开发板 J-LINK V11 开发板自带 软件开发环境 e2 studio VSCODE…

oracle怎么导入dmp文件??????

目录 oracle怎么导入dmp文件?????? 先看: 方法一:【推荐】 winR输入 输入: 检验: 导入成功! 方法二: 直接在 PLSQL Developer…

插入排序:直接插入排序 希尔排序

插入排序: 假设红竖线前的元素全部排好序,红线后面的数即为要插入的数据,红线依次往后移,假设end为排好序的最后一个数字,end1即为要插入的数字,一次插入时,end与要插入的数字依次比较&#xf…

Axure元件库的使用

1.基本元件库 1.1Axure的画布范围 Axure是一个绘制项目原型图的软件,它里面的基本原件有: 1.1元件的呈现范围 首先我们要了解基本元件的作用范围在哪里? 浏览效果: 可以看出当我们的基本元件放在画布区域内是可以完全呈现出来…

从0创建并部署一个网页到服务器

创建一个页面 1 下载node.js 下载VScode 2 在Windows下找一个路径新建一个文件夹 例如:D:\study_project\PersonalWeb 3 VSCodee中打开文件夹 4 Windows下 管理员身份打开命令提示符,执行npm install -g vue/cli 5 VSCode下打开终端,执…

线程终止,线程的相关方法,线程状态图以及线程的同步机制。

首先我们知道了什么是线程,以及线程的实现方法,接下来我们来了解一下继承Thread类和Runnable接口的区别,其实本质上是没有区别的,因为Thread也实现了Runnable的接口,唯一区别就是使用Runnable接口,可以实现…

关联规则 Apriori算法原理

Apriori算法 算法概述 Apriori算法利用频繁项集生成关联规则。它基于频繁项集的子集也必须是频繁项集的概念频繁项集是支持值大于阈值 (support) 的项集 Apriori算法就是基于一个先验如果某个项集是频繁的,那么它的所有子集也是频繁的 算法流程 输入: 数据集合D…

【笔试强化】Day 4

文章目录 一、单选1.2.3.4.5.6.7. 二、不定项选择1.2.3. 三、编程1. 计算糖果题解:代码: 2. 进制转换题解:代码: 一、单选 1. 正确答案:D队列先进先出 A:栈有关 B:错 C:错 2. 正确…