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

news2024/9/20 9:39:48

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 preload
		config.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#L171
			fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
			include: 'initial'
		}])

		// when there are many pages, it will cause too many meaningless requests
		config.plugins.delete('prefetch')

		// set svg-sprite-loader
		config.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 package
									priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
									test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
								},
								commons: {
									name: 'chunk-commons',
									test: resolve('src/components'), // can customize your rules
									minChunks: 3, //  minimum common number
									priority: 5,
									reuseExistingChunk: true
								}
							}
						})
					// https:// webpack.js.org/configuration/optimization/#optimizationruntimechunk
					config.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.coloradmin.cn/o/1316980.html

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

相关文章

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

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

Windows7下双网卡绑定(双网络冗余)

1.首先需要电脑主机里至少有两张网卡。 2.打开计算机管理,点击左侧的设备管理器: 3.点击展开右侧的 网络适配器: 4.如下是我们即将需要进行绑定的两张网卡: 5.右键点击第一张网卡,选择属性: 6.选择 分组 栏…

Angular中使用Intersection Observer API实现无限滚动

背景&#xff1a; 实现原理为 在data下面加一个loading元素 如果此元素进入视窗 则调用api获取新的数据加到原来的数据里面&#xff0c;这时loading就会被新数据顶下去&#xff0c;如此循环。 <div id"dataContainer"></div> <div id"loadingCo…

linux添加环境变量

一、查看当前环境变量 echo $PATH 二、将工作空间添加到环境变量&#xff0c;vim是编辑器&#xff0c;可以换成别的编辑器&#xff0c;vim编辑器的使用法可以百度一下 vim ~/.bashrc编辑器添加&#xff1a; source ~/scan_ws/devel/setup.bash

【Linux】介绍:进程退出、进程等待、进程程序替换

目录 一、进程退出 _exit函数 exit函数 _exit()与exit比较 return退出 二、进程等待 wait方法 waitpid方法 三、进程程序替换 替换函数 函数解释 命名理解 使用举例 一、进程退出 正常终止&#xff08;可以通过 echo $? 查看进程退出码&#xff09;&#xff1a;1.…

爬虫工作量由小到大的思维转变---<第十一章 Scrapy之sqlalchemy模版和改造(番外)>

前言: 正常的pymysql当然问题不大,但是我个人还是建议:sqlalchemy! 因为他更能让我们把精力放在表单设计上,而不执着于代码本身了. (-----版权所有。未经作者书面同意&#xff0c;不得转载或用于任何商业用途!----) 正文: 先提供一个基础模版: 表图: 创建表的sql: CREA…

【漏洞复现】捷诚管理信息系统 SQL注入漏洞

漏洞描述 捷诚管理信息系统是一款功能全面,可以支持自营、联营到外柜租赁的管理,其自身带工作流管理工具,能够帮助企业有效的开展内部审批工作。 该系统CWSFinanceCommon.asmx接口存在SQL注入漏洞。未经身份认证的攻击者可以通过该漏洞获取数据库敏感信息,深入利用可获取…

JavaScript值类型和引用类型两道经典面试题

JavaScript值类型和引用类型两道经典面试题 题目1题目2 题目1 首先&#xff0c;小试牛刀&#xff0c;请看第一道题。 let a {x: 10 } let b a a.x 20 console.log(b.x)a {x: 30 } console.log(b.x) a.x 40 console.log(b.x);那么上述代码输出结果是多少呢&#xff1f; …

物联网AI 物联网平台学习之概述

学物联网&#xff0c;来万物简单IoT物联网&#xff01;&#xff01; 万物简单IOT是一个集物联网教育、企业SaaS私有化部署的物联网服务平台&#xff0c;它集成了设备管理、数据安全通信、消息订阅、规则引擎等一系列物联网核心能力&#xff0c;支持设备数据上云以及海量设备数…

<VR串流线方案> PICO 4 Pro VR串流线方案 Oculus Quest2 Link串流线方案

虚拟现实技术(英文名称&#xff1a;Virtual Reality&#xff0c;缩写为VR)&#xff0c;又称虚拟实境或灵境技术&#xff0c;是20世纪发展起来的一项全新的实用技术。虚拟现实技术囊括计算机、电子信息、仿真技术&#xff0c;其基本实现方式是以计算机技术为主&#xff0c;利用并…

UE4 Niagara学习笔记

需要在其他发射器的同一个粒子位置发射其他粒子就用Spawn Particles from other Emitter 把发射器名字填上去即可 这里Move to Nearest Distance Field Subface GPU&#xff0c;可以将生成的Niagara附着到最近的物体上 使用场景就是做的火苗附着到物体上

基于 WebSocket 打造聊天室

一、什么是 WebSocket&#xff1f; WebSocket 是一种基于TCP连接上进行 全双工 通信的协议。WebSocket使得客户端和服务器之间的数据交换变得更加简单&#xff0c;允许服务端主动向客户端推送数据。在WebSocket API中&#xff0c;浏览器和服务器只需要完成一次握手&#xff0c…

翻译: LLM工具使用和代理Tool use and agents

欢迎来到本周的最后一个视频。在这个视频中&#xff0c;我想与您分享LLM&#xff08;大型语言模型&#xff09;开始能够使用工具的情况&#xff0c;以及讨论一下前沿的“代理”主题&#xff0c;这是让LLM自己决定下一步采取什么行动的领域。让我们来看看。在早期的食物订单接收…

centos7安装node-v18版本

背景# 背景就是上一篇文章提到的&#xff0c;部署gitbook这个文档中心的话&#xff0c;是需要先安装node&#xff0c;然后&#xff0c;如果你的node版本过高的话&#xff0c;一般会报错&#xff0c;此时&#xff0c;网上很多文章就是降node版本解决&#xff0c;但其实用高版本…

【️如何理解面向对象和面向过程】

✅如何理解面向对象和面向过程&#xff1f; 典型理解✅扩展知识仓✅面向对象的三大基本特征✅封装✅继承✅多态 ✅为什么Java不支持多继承&#xff1f;✅菱形继承问题✅Java 8 中的多继承 ✅面向对象的五大基本原则&#xff1f; 典型理解 面向过程把问题分解成一个一个步骤&…

buuctf-Misc 题目解答分解85-87

85.[UTCTF2020]file header 下载完就是一个图片 &#xff0c;但是显示图片错误&#xff0c;提示文件头 没有 用010editor 打开 找一个png 文件&#xff0c;看一下它的头部 只需要修改前四个字节为 89 50 4E 47 即可 就能拿到flag utflag{3lit3_h4ck3r} 86.[WUSTCTF2020]gir…

蓝桥杯专题-真题版含答案-【三角螺旋阵】【干支记年法】【异或加密法】【金字塔】

Unity3D特效百例案例项目实战源码Android-Unity实战问题汇总游戏脚本-辅助自动化Android控件全解手册再战Android系列Scratch编程案例软考全系列Unity3D学习专栏蓝桥系列ChatGPT和AIGC &#x1f449;关于作者 专注于Android/Unity和各种游戏开发技巧&#xff0c;以及各种资源分…

v851s ssh搭建与使用

ssh 概述: 1. 用来远程登录的一种安全通道协议(常用于linux 、UNIX中); 2. 分为服务端和客户端: 1)服务端即openSSH ,一般属于目标开发板(linux中配置文件路径/etc/ssh/sshd_config); 2)客户端即登录端,常用工具:sercureCRT 、MobaXterm 、Putty等; 1. ssh 服务…

Webrtc 学习交流

花了几周的时间研究了一下webrtc &#xff0c;并开发了一个小项目&#xff0c;用来点对点私密聊天 交流传输文件等…后续会继续扩展其功能。 体验地址&#xff0c;大狗子的ID,我在线时可以连接测试到我 f3e0d6d0-cfd7-44a4-b333-e82c821cd927 项目特点 除了交换信令与stun 没…

Hadoop分布式配置小白篇(附加各阶段问题解决方式)

看的黑马的课&#xff0c;记录一下配置步骤 目录 1.VMware安装&#xff1a; 方法1&#xff1a; 方法2&#xff1a; 2.创建虚拟机 1.ISO镜像文件获取&#xff08;CentOS&#xff09;&#xff1a; 2.创建&#xff08;简略步骤&#xff09; 3.克隆虚拟机&#xff08;克隆伪…