【Vue】Antd Pro Vue的使用(四)—— 打包发布到站点二级目录,生产环境请求接口配置

CrazyPanda3周前Vue52

如题,Antd Pro Vue开发完成后,要打包发布到站点指定二级目录下,

我这里服务端配置的是tp,在站点public文件夹新建一个system文件夹,前端打包后要放到个文件夹里面,

需要配置2步

1. 在根目录vue.config.js文件夹中配置publicPath 

publicPath: '/system/',

无标题.png

2. 在/src/router/index.js文件中,增加base配置,配置内容与publicPath保持一致

router: {
    mode: 'hash',
    base: '/system/',
    routes: [
      // ... 路由配置
    ],
  },

无标题.png

以上两部已经可以实现打包发布到站点system文件夹下了,接下来我们在处理下接口请求。

3. 在根目录.env文件中,配置请求连接如下

VUE_APP_API_BASE_URL=/index.php

202404291714370060738023.png

可以看到配置的请求连接,省去了域名,这样配置好之后,直接访问http://xxx.xxx.com/system即可打开我们的站点页面,

好处就是即使换域名了也不需要修改请求连接,也不需要重新打包发布,nice!!!

相关文章

【Vue】vue2应用与vue3的不同之处

【Vue】vue2应用与vue3的不同之处

上一篇,我使用了vue2创建了一个应用,这次我使用vue3创建一个应用,看一下两者有什么不同。如下,是我用cue3创建的应用目录发现和vue2应用的目录一模一样,然后我用对比工具对比了两者的文件。1....

【前端】Ant Design of Vue安装

关于 ant-design-vue #众所周知,Ant Design 作为一门设计语言面世,经历过多年的迭代和积累,它对 UI 的设计思想已经成为一套事实标准,受到众多前端开发者及企业的追捧...

【VUE】vue3组件间的通信,父组件调用子组件方法

文章目录一、父组件数据传递N个层级的子组件二、使用v-model指令实现父子组件的双向绑定三、父组件props向子组件传值四、子组件emit向父组件传值五、通过expose和ref来实现父组件调用子组...

【UniApp】uniapp及vue中动画功能实现方案

需求场景:实际开发过程中,我们经常遇到各类比较炫酷的动画开发,比如简单的echarts插件使用,animation动画等...动画实现方案:1.css动画,如gif,a-png,animation,t...

【Vue】vue中的$set的作用

$set 的作用是响应式地设置对象或数组的属性,确保更改被 vue.js 追踪和更新,从而触发视图重新渲染。其用法包括:vue.set(target, key, value),适用于直接赋值不起作用、...

【Vue】vue3+node+Element-Ui+spark-md5实现大文件上传、断点续传、秒传、多大文件上传

文章目录目录文章目录前言整体架构流程技术名词解释前端大文件上传断点续传后端大文件上传代码部分js部分的逻辑,按照我们的上面的分析,我们可以写出如下的结构将文件变成二进制,方便后续分片将大文件进行分片创...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。