vue-element-admin项目模板打包后的dist文件如何修改后台接口地址

已于 2023-04-23 14:40:33 修改
阅读量1.3k 收藏 5
点赞数 2
文章标签： vue.js 前端 javascript vue打包发布
于 2023-04-23 14:30:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47615289/article/details/130320605
版权
在基于vue-element-admin的Vue项目中，通过打包生成dist文件，然后在public目录下创建static/config.js，将配置文件引入到index.html。当需要修改后台接口地址时，只需更新static/config.js，重启Nginx服务即可实现接口地址的动态调整。
摘要由CSDN通过智能技术生成
  • 条件：1. 使用 vue-element-admin模板的vue项目 2.打包dist文件 3. nginx部署
  1. 在public文件下新建/staic/config.js
    在这里插入图片描述
    在这里插入图片描述

2.在index.html中引入config.js
在这里插入图片描述
3.此时就可以去你想应用的场景去直接应用了（去找到request.js的封装文件）

在这里插入图片描述
4.打包后的dist文件结构
在这里插入图片描述
5.当后台接口地址变动时只需要改一下/staic/config.js文件中的信息重启一下nginx就可以了

张毫洁
关注
vue-element-admin项目开发全流程
guanan1230的博客
05-16 1017
vue组件开发 编写组件时应该先定义API props名称具备语义化，类型符合规范 props可以添加自定义校验validator，值是一个函数，参数是当前传入值，返回值是布尔值 组件使用时绑定的类似于原生的事件，不能被识别，需要添加.native修饰符或者当成自定义事件处理 <template> <button class="h-btn" :class="[sizeClass,typeClass]" @click="clickHandler"> <
《hyperf+vue-element-admin - 实现前后分离多项目二级目录部署》
小霸王的博客
02-08 829
前后端分离vue-element-admin + hyperf
Vue打包好的dist如何在本地运行
Python_No1的博客
01-13 897
Vue打包好的dist如何在本地运行
Vue-ele-admin 后端接入【00 修改请求接口路径及代理】
Damionew的博客
02-04 2029
Vue尚未入门者，有错误烦请指正！ Vue-element-admin项目使用mock模拟数据，现在需要改为后端接口 1、将反向代理修改为后端接口地址 原使用mock模拟数据 devServer: { port: port, open: true, overlay: { warnings: false, errors: true }, before: require('./mock/mock-server.js') } 修改后使
vue打包之后，可以进行修改配置后端地址、端口等信息方法
用心,承载未来
04-12 5740
用vue-cli构建的项目通常是采用前后端分离的开发模式，也就是前端与后台完全分离，此时就需要将后台接口地址打包进项目中，但是，难道我们只是改个接口地址也要重新打包吗？当然不行了，那就太麻烦了，怎么解决呢？本文推荐俩种方式。
前端（以Vue为例）webpack打包后dist文件包如何部署到django后台中
AlexGeek
10-07 2万+
       由于现在前端使用的三大框架配合webpack可以实现快速打包，为部署到服务端提供了非常大的便利，那么在前端打包后，应该做些什么可以部署到django的后台中呢？ 1.打包后文件包dist 进入到 dist文件包会发现是这个样子的： 2.在django项目中创建前端文件包（静态资源包，我习惯起名为frontend）         然后把dist文件包中的static文...
vue打包部署之后，引入的ip地址可以修改，无需再次打包(vue2)
weixin_43787161的博客
02-21 1241
vue打包部署之后，引入的ip地址可以修改，无需再次打包(vue2)
vue-admin-element+Electron打包exe可执行文件(输出为dist文件夹即可)
最新发布
04-24
在标题和描述中提到的“vue-admin-element+Electron打包exe可执行文件”，意味着开发者正在尝试将基于Vue.js和Element UI的管理后台应用与Electron结合，打包成Windows平台的.exe可执行文件。这个过程通常是为了将...
vue-admin-element：（Vue2演示项目）属性后台管理系统-ElementUI（基本结构已完成，剩下的就是具体业务开发；如有疑问请留言）
02-05
上朝科技-后台管理系统-Element-UI框架 静态演示页面：http: 特别提醒（需要将静态测试的json数据输出到dist文件夹）： yarn run dev前，请先使用yarn run build打包一下; 然后再使用yarn run dev进行测试 技术 ...
vue3-element-admin 后台管理系统模板
Hua929323125的博客
03-26 8176
element_vue3.0/VE-Admin ✈ 国内加速链接✈ 效果预览 项目简介 基于vue3和element-plus开发的企业后台管理模板. 功能特性 项目使用了最新的vue3全家桶+element-plus+mockjs+axios+eChart5.项目继成了mockServe,可脱离后端自主开发测试 对axios深度封装,采用动态路由,路由配置更简单,mockServe独立开发测试时可在nodework直观查看接口数据 基于node实现自动化开发 环境依赖 n...
如何修改Vue打包后文件的接口地址配置
weixin_43123984的博客
02-10 2265
如何修改Vue打包后文件的接口地址配置 步骤一 在public文件下新建一个config.js配置全局变量 步骤二 在public文件下的index.html中引入config.js 步骤三 在api中使用全局变量baseURl 步骤四 在vue.config.js中配置打包后路径 以上配置结束后，npm run build生成的dist文件中的config.js便可外部动态修改baseUrl了 ...
vue2项目打dist包后更换接口地址
weixin_49682182的博客
03-20 1151
vue2项目打dist包后更换接口地址
vue-element-admin 打包生成外部配置文件修改后端访问地址
xuxingyuan_的博客
12-27 2423
一般，我们前端打包项目之前要先问上级要一个线上环境的访问ip，这样才能确保访问得到。但是，这种方式一般很笨戳，每次都要问，直到我的上级被我问烦了... 上级："你打包的时候能不能生成一个配置文件，里面包含了访问的ip地址，打包好后也可以进行修改，无需再进行打包" 我：“。。。。。。。。” 上级：“我知道你可以的，加油，下一个版本要实现这个功能” 我：“，，，，，，，，，” 于是我开始百度，因为我做的一般是内部管理系统，使用的框架网上现成的框架，vue-element-admin-master，
vue设置全局配置文件，打包后在dist包内可动态修改配置
weixin_43485503的博客
07-14 6443
vue设置全局配置文件，打包后在dist包内可手动修改配置文件
webpack 打包后的dist文件进行特殊性修改
诸葛韩信--一个前往前端不归路的浪子
11-04 4180
一、webpack打包文件——dist dist文件默认是webpack打包之后的最外层文件夹。一个web前端项目，往往会有比较多的文件，而图片、js、css都是必须的，当然如果是扩展的话，还有很多其他的文件，比如说字体，html，ts，html，jsx等。比如下图的目录结构： 二、加密或者路径或者其它需求 当文件需要加密的时候，就需要将代码中的一些敏感信息加密。这个时候，我们往往...
【vue-element-admin】登录接口对接自己的后端, .NET Core Web API 6
Liaiblog
04-24 4605
文章介绍 vue-element-admin 登录接口对接 后端基于.NET Core Web API 6 EFcore 和后端数据链接 Jwt 认证 开源资源连接 Core + Vue 后台管理基础框架 vue-element-admin-site 新建项目一个Web API项目：vue element admin 不要配置HTTPS 配置EFCore 配置跨越 配置JWT 后台运行程序 配置vue-element-admin 我的方法不是全局配置，没有配置以下文件
vue 项目打包之后进行修改配置后端 IP 地址、端口等信息方法
CSDN_33901573的博客
05-11 9442
用vue-cli构建的项目通常是采用前后端分离的开发模式，也就是前端与后台完全分离，此时就需要将后台接口地址打包进项目中，但是，我们只是改个接口地址也要重新打包那就太麻烦了。怎么解决呢？方法如下，本文推荐俩种方式。
vue-element-admin（一）配置后台api接口baseUrl
热门推荐
菜鸟爱飞不飞的博客
06-14 2万+
前言 vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型 官网地址：https://panjiachen.gitee.io/vue-element-admin-site/zh/ github地址：https://github.com/PanJiaChen/vue-element-admin
vue-element-admin mock替换为服务器接口+ 请求头的设置
wh4834的博客
01-06 1808
vue-element-admin mock替换为服务器接口+ 请求头的设置 自学路上遇到的头痛的问题，写下来自己做个备忘，也希望帮助到初学者的你们。比心~
vue-element-admin打包
03-16
vue-element-admin打包的步骤如下： 1. 在命令行中进入项目根目录，运行命令npm run build。 2. 执行完命令后，会在项目根目录下生成一个dist文件夹，里面包含了打包后的文件。 3. 将dist文件夹中的所有文件上传到服务器上，即可完成部署。 注意：在打包前需要先修改config文件夹下的index.js文件中的assetsPublicPath属性，将其改为服务器上的路径。例如，如果服务器上的路径为http://www.example.com/vue-element-admin，则需要将assetsPublicPath改为'/vue-element-admin/'。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值