【Vue】Antd Pro Vue的使用（四）—— 打包发布到站点二级目录，生产环境请求接口配置
CrazyPanda发表于：2024-04-27 23:32:54浏览：331次
如题，Antd Pro Vue开发完成后，要打包发布到站点指定二级目录下，
我这里服务端配置的是tp，在站点public文件夹新建一个system文件夹，前端打包后要放到个文件夹里面，
需要配置2步
1. 在根目录vue.config.js文件夹中配置publicPath
publicPath: '/system/',
2. 在/src/router/index.js文件中，增加base配置，配置内容与publicPath保持一致
router: {
mode: 'hash',
base: '/system/',
routes: [
// ... 路由配置
],
},
以上两部已经可以实现打包发布到站点system文件夹下了，接下来我们在处理下接口请求。
3. 在根目录.env文件中，配置请求连接如下
VUE_APP_API_BASE_URL=/index.php
可以看到配置的请求连接，省去了域名，这样配置好之后，直接访问http://xxx.xxx.com/system即可打开我们的站点页面，
好处就是即使换域名了也不需要修改请求连接，也不需要重新打包发布，nice！！！
猜你喜欢
- 【Vue】Vue3 开发实战分享——打印插件 Print.js 的使用（Vue3 + Nodejs + Print.js 实战）以及 el-table 与 el-pagination 的深入使用（上）
- 文章目录📋前言🎯关于 Print.js🧩PDF 打印🧩网页（HTML）打印🧩图像打印🧩JSON 打印🧩下载并安装使用🧩相关配置🎯 Vue3 中使用 Print.js 实战🎯Vue3 + Nodejs + Print.js 模拟打印实战案例🧩启动 Nodejs 服务🧩启动 Vue 项目📝最后📋前言今天久违的更新一下关于 Vue 的文章了，本篇文章是基于 Vue3 + Node.js + ElementPlus 的实战项目分享，实战内容包括有打印插件 Print.js 的
- 【Vue】vue3+node+Element-Ui+spark-md5实现大文件上传、断点续传、秒传、多大文件上传
- 文章目录目录文章目录前言整体架构流程技术名词解释前端大文件上传断点续传后端大文件上传代码部分js部分的逻辑，按照我们的上面的分析，我们可以写出如下的结构将文件变成二进制，方便后续分片将大文件进行分片创建切片请求将每一个切片 并行/串行 的方式发出后端接口逻辑小结前言在Vue项目中，大图片和多数据Excel等大文件的上传是一个非常常见的需求。然而，由于文件大小较大，上传速度很慢，传输中断等问题也难以避免。因此，为了提高上传效率和成功率，我们需要使用切片上传的方式，实现文件秒传、断点续传、错误重试、
- 【Vue】Andt Pro Vue的使用（六） —— 描述列表a-descriptions设置label和content的样式
- 1、 a-descriptions设置label和content的样式在react组件中，可以直接设置labelStyle和contentStyle，来设置label和content的样式，但是在vue2的组件中，官方并没有给出响应的设置方法如下是我的订单详情页面label的宽度是自适应的，想要设置为固定的宽度，网上找了好多方法，都不生效直到遇到下面的方法https://blog.csdn.net/fifty_one/article/details/120219194 要使用/deep，
- 【Vue】Vue 前后端分离部署方案
- 方案 1：Docker创建两个 Docker 容器，一个用于后端，一个用于前端。在后端容器中运行 API 代码。在前端容器中运行 Vue 应用程序并将其打包为静态文件（如 HTML、CSS 和 JS）。方案 2：Nginx 代理安装 Nginx Web 服务器作为反向代理。将后端 API 路由到 Nginx。Nginx 将前端静态文件提供给客户端。方案 3：Node Express使用 Node Express 作为后端框架，它可以将静态文件与 API 路由一起托管。在 Express 应用程序
- 【Vue】Antd Pro Vue的使用（一）—— 安装及运行
- 前言Ant Design Pro 是一个企业级中后台前端/设计解决方案，致力于在设计规范和基础组件的基础上，继续向上构建，提炼出典型模板/业务组件/配套设计资源，进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。AntDesignVue与react版本有几乎相同的布局AntDesignPro React版本：开箱即用的中台前端/设计解决方案 - Ant Design ProAntDesign组件：Ant Design - 一套企业级 UI 设计语言和 React 组件库Ant
- 【Vue】vue使用后端提供的接口
- 在 vue 中使用后端接口可通过以下步骤实现：安装 axios 库并导入。使用 axios 对象创建 http 请求，如 get 或 post。使用 data 选项传递数据。处理响应，使用 data 属性访问后端返回的数据。使用 vuex 管理从后端获取的数据，通过组件访问。在 Vue 中使用后端接口在 Vue.js 应用中使用后端提供的接口可以让你与服务器通信，获取和更新数据。本文将介绍如何在 Vue 中使用后端接口。1. 安装 Axios首先，你需要安装 Axios 库，这是一个用于发起 H
- 【Vue】vue中sync作用
- vue 中的 sync 修饰符用于在父组件和子组件之间实现双向数据绑定。它通过生成一个 v-model 指令，将子组件的 prop 与父组件的 prop 绑定在一起，从而实现数据同步。用法如下：1. 在子组件中使用 v-bind:prop.sync="parentprop"，其中 prop 是子组件的 prop 名称，parentprop 是父组件绑定的 prop 名称。Vue 中 sync 作用在 Vue 中，sync 修饰符是一种特殊的语法糖，它允许在父组件和子组件之间进
- 【Vue】Vue中字符串数组和对象常用方法介绍
- 在Vue中，数组和字符串是我们最常处理的数据类型。Vue提供了响应式系统，可以自动跟踪数组和对象的变化，并响应式地更新DOM。在Vue中，您可以像在任何JavaScript应用程序中一样操作这些数据类型。下面时整理的Vue中字符串 数组 以及对象的常用操作方法。一.数组方法1.增删改： unshift、push、splice、shift、pop、splice、slice 1.1.unshift：在数组的头部添加内容// 数组.unshift("添加的值")
栏目分类全部>