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 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
	})
}

其他接口地址修改同上 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

C++相关闲碎记录(15)

1、string字符串 #include <iostream> #include <string> using namespace std;int main (int argc, char** argv) {const string delims(" \t,.;");string line;// for every line read successfullywhile (getline(cin,line)) {string::size_type beg…

带你亲证AI应用开发的“奇点”时刻

带你亲证AI应用开发的“奇点”时刻 AI 应用开发——新的历史节点 事实上&#xff0c;没有任何一种突破能够不经历重重失败&#xff0c;不体验一轮轮的痛苦&#xff0c;就能直接展现在人类面前。AI 技术自诞生之初直至今日&#xff0c;其发展之路从未一帆风顺——辉煌与寒冬交…

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

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

Leetcode的AC指南 —— 链表:19.删除链表的倒数第N个节点

摘要&#xff1a; Leetcode的AC指南 —— 链表&#xff1a;19.删除链表的倒数第N个节点。题目介绍&#xff1a;给你一个链表&#xff0c;删除链表的倒数第 n 个结点&#xff0c;并且返回链表的头结点。 文章目录 一、题目二、解析1、滑动窗口/快慢指针&#xff08;傻傻分不清&…

平均数 C语言xdoj66

问题描述 计算n个整数&#xff08;x1,x2,x3...&#xff09;的平均数&#xff0c;结果保留两位小数。 输入说明 第一行为整数n&#xff08;1 < n <100&#xff09;&#xff0c;接下来是n个整数(0 < x1,x2,x3....< 2^31 - 1)。 输出说明 输出这n个整数的…

netty-daxin-2(netty常用事件讲解)

文章目录 netty常用事件讲解ChannelHandler接口ChannelHandler适配器类ChannelInboundHandler 子接口Channel 的状态调用时机ChannelHandler 生命周期示例NettServer&CustomizeInboundHandlerNettyClient测试分析 ChannelInboundHandlerAdapter适配器类SimpleChannelInboun…

C# 如何控制多线程同步执行

写在前面 使用Task类来控制多线程的同步执行&#xff0c;可应用于多任务分发执行后&#xff0c;再做归并处理。Tas既拥有线程池的优点&#xff0c;同时也解决了使用ThreadPool不易控制的弊端&#xff1b;可以非常简便并可靠地实现多线程的顺序执行。 代码实现 public class …

qt中通过objectName来查找控制,使用控件(QString名字)

先拖个控件&#xff0c;名字为label_1,然后执行如下操作&#xff1a; QString objectName QString("label_1");QLabel *tempLabel this->findChild<QLabel*>(objectName);tempLabel->setText("123");

钉钉 × E签宝,打通系统屏障,实现钉钉审批通过后自动同步到E签宝发起签署并返回拖章链接全流程自动化

1 场景描述 成熟的业务体系需要用户的优质体验和高效的交易效率来支撑。而合同作为双方业务往来的法律保证&#xff0c;签合同已成为目前企业必不可少的重要一环。但传统的签署场景中&#xff0c;传统纸质合同的签署往往采用线下见面或邮寄的方式进行&#xff0c;不仅流程复杂&…

C++使用UDP

C使用UDP 对C使用UDP做了简单封装&#xff0c;可直接运行 头文件udp.h #pragma once #include <Winsock.h> #pragma comment(lib,"WS2_32.lib")#define LOCAL_IP_ADDR INADDR_ANY //当前应用程序接收的IP地址 #define LOCAL_PORT 9527 …

【笔试强化】Day 4

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

二叉树遍历

今天讲的不是 leetcode 上的题&#xff0c;但也和二叉树有关&#xff0c;一道比较有意思的题 牛客网上的题&#xff0c;如果看懂了&#xff0c;也可以来试着做一下&#xff1a; 二叉树遍历_牛客题霸_牛客网 (nowcoder.com) 题目 编一个程序&#xff0c;读入用户输入的一串先…

VGG(pytorch)

VGG:达到了传统串型结构深度的极限 学习VGG原理要了解CNN感受野的基础知识 model.py import torch.nn as nn import torch# official pretrain weights model_urls {vgg11: https://download.pytorch.org/models/vgg11-bbd30ac9.pth,vgg13: https://download.pytorch.org/mo…

WEB 3D技术 简述React Hook/Class 组件中使用three.js方式

之前 已经讲过了 用vue结合three.js进行开发 那么 自然是少不了react 我们 还是先创建一个文件夹 终端执行 npm init vitelatest输入一下项目名称 然后技术选择 react 也不太清楚大家的基础 那就选择最简单的js 然后 我们就创建完成了 然后 我们用编辑器打开创建好的项目目…

卷积的计算 - im2col 2

卷积的计算 - im2col 2 flyfish import numpy as np np.set_printoptions(linewidth200)# F filter kerneldef im2col(images, kernel_size, stride1, padding0):#process imagesif images.ndim 2:images images.reshape(1, 1, *images.shape)elif images.ndim 3:N, I_…

RK3568平台开发系列讲解(Linux系统篇)如何优化Linux驱动的稳定性和效率

🚀返回专栏总目录 文章目录 一、检测 ioctl 命令二、检测传递地址是否合理三、分支预测优化沉淀、分享、成长,让自己和他人都能有所收获!😄 📢在 Linux 中应用程序运行在用户空间,应用程序错误之后,并不会影响其他程序的运行,而驱动工作在内核层,是内核代码的一部分…

响应者链概述

响应者链 iOS事件的3大类型 Touch Events(触摸事件)Motion Events(运动事件&#xff0c;比如重力感应和摇一摇等)Remote Events(远程事件&#xff0c;比如用耳机上得按键来控制手机) 触摸事件 处理触摸事件的两个步骤 寻找事件的最佳响应者事件的响应在响应链中的传递 寻…

记录 | gpu docker启动报错libnvidia-ml.so.1: file exists: unknown

困扰了两天的问题&#xff0c;记录一下 问题出在启动一个本身已经安装 cuda 的镜像上&#xff0c;具体来说&#xff0c;我是启动地平线天工开物工具链镜像的时候出现的问题&#xff0c;具体报错如下&#xff1a; docker: Error response from daemon: failed to create task …

System作为系统进程陔如何关闭?

一、简介 system进程是不可以关闭的&#xff0c;它是用来运行一些系统命令的&#xff0c;比如reboot、shutdown等&#xff0c;以及用来运行一些后台程序&#xff0c;比如ntfs-3g、v4l2loopback等。system进程也被用于运行一些内核模块&#xff0c;比如nvidia、atd等。system进程…

结构体基础全家桶(1)创建与初始化

目录 结构体概念&#xff1a; 结构体类型&#xff1a; 结构体变量的创建&#xff1a; 定义结构体变量的三种方式&#xff1a; 结构体变量的引用&#xff1a; 结构体变量的初始化: 结构体数组&#xff1a; 结构体数组定义&#xff1a; 结构体数组初始化&#xff1a; 结…