const baseUrl = process.env.NODE_ENV === 'production' ? process.env.VUE_APP_BASEURL : '/'和const baseUrl = process.env.NODE_ENV === 'production' ? process.env.VUE_APP_BASEURL : './'

时间: 2024-04-27 19:21:48 浏览: 219

vue.js根据代码运行环境选择baseurl的方法

配置通用的API前缀可以更好在本地通过接口代理转发获取数据、或者部署时在Nginx中做反向代理，但是项目中一旦涉及大量的需要文件上传的部分（文件上传不走Ajax的方法），我们需要考虑更好管理接口的baseURL，项目中 Ajax 请求用 axios ，原始代码如下修改前 // 创建axios实例、配置baseURL、超时时间 const service = axios.create({ baseURL: '/development/api', // 从环境进程中根据运行环境获取的api的base_url timeout: 5000 // 请求超时时间 }) /* 保在Vue.js应用中，合理地配置API的基础URL（baseURL）对于本地开发和生产环境的无缝切换至关重要。本文将详细讲解如何根据代码运行环境选择baseURL的方法，以便在不同的环境中正确地调用API。当我们在本地进行开发时，通常会通过接口代理来避免跨域问题。例如，我们可以配置Vue CLI的代理设置，使得所有向`/development/api`路径的请求实际上被转发到实际的API服务器。然而，当项目部署到生产环境，我们需要确保所有的API请求指向正确的服务器，这时可能需要通过Nginx等反向代理服务器来实现。在原始代码中，baseURL是硬编码为`'/development/api'`的，如下所示： ```javascript const service = axios.create({ baseURL: '/development/api', timeout: 5000 }); ``` 但这样的做法存在一个问题，即它不适用于文件上传。文件上传通常不使用Ajax，而是直接提交表单，这就要求我们能够灵活地根据运行环境改变baseURL。为了实现环境感知的baseURL，我们可以利用Node.js中的`process.env`对象，它提供了关于当前环境的信息。在Vue.js项目中，我们通常会有两个环境配置文件：`dev.env.js`（开发环境）和`prod.env.js`（生产环境）。在这些文件中，我们可以添加一个名为`API_BASEURL`的变量来存储基础URL，如下所示： **dev.env.js** ```javascript module.exports = { NODE_ENV: '"development"', API_BASEURL: '"/development/api/"' }; ``` **prod.env.js** ```javascript module.exports = { NODE_ENV: '"production"', API_BASEURL: '"/production/api/"' // 请替换为实际生产环境的API基础路径 }; ``` 然后，我们可以在代码中使用`process.env.API_BASEURL`来动态获取当前环境的baseURL，如下： ```javascript const service = axios.create({ baseURL: process.env.API_BASEURL, timeout: 5000 }); // 保存分配角色 export function fetchSaveDisUser(params1) { return fetch({ url: '/user/empower', method: 'post', params: params1, paramsSerializer: function(params) { return Qs.stringify(params, { arrayFormat: 'repeat' }); } }); } // 上传文件URL 从运行环境process.env中读取API配置 export let uploadUrl = process.env.API_BASEURL + '/doi/analys/upload'; ``` 这样，无论是在本地开发还是在生产环境中，我们的API请求和文件上传都能正确地指向相应的服务器。同时，这也便于我们后期维护和扩展，因为所有的API调用都会自动适应当前的运行环境。总结来说，关键步骤包括： 1. 在`dev.env.js`和`prod.env.js`中定义`API_BASEURL`变量。 2. 在需要使用baseURL的地方，使用`process.env.API_BASEURL`来代替硬编码的URL。 3. 保证文件上传的URL也根据环境动态调整。通过这种方法，我们可以实现Vue.js应用的API调用与运行环境的完美适配，提高代码的可维护性和灵活性。

这两行代码的作用是在根据当前环境判断应该使用哪个URL作为请求的基础路径。如果当前环境为生产环境，那么就使用VUE_APP_BASEURL作为基础路径；否则就使用根路径（/或./）作为基础路径。其中，VUE_APP_BASEURL是通过在项目的.env文件中设置的一个环境变量。这样可以方便地切换不同环境下的请求地址。

阅读全文

const baseUrl = process.env.NODE_ENV === 'production' ? process.env.VUE_APP_BASEURL : '/'和const baseUrl = process.env.NODE_ENV === 'production' ? process.env.VUE_APP_BASEURL : './'

相关推荐

vue axios 二次封装的示例代码

【JavaScript源代码】Vue接口封装的完整步骤记录.docx

const baseUrl = process.env.NODE_ENV === 'production' ? process.env.VUE_APP_BASEURL : './'

const baseUrl = process.env.NODE_ENV === 'production' ? process.env.VUE_APP_BASEURL : '/'

const service = axios.create({ baseURL: process.env.VUE_APP_BASE_URL, // api 的 base_url timeout: process.env.VUE_APP_REQUEST_TIME_OUT // 请求超时时间 })

vue2脚手架中，baseURL: process.env.VUE_APP_API_BASEURL,总是无法识别

const apiBaseUrl = window._CONFIG['domianURL'] || '/jeecgboot'; vue2.x转化为vue3.x

vue的process.env.base_url详解和介绍

vue2中process.env.BASE_URL

Vue.js网络安全指南：防止ERR_CONNECTION_REFUSED错误的6个关键步骤

Spring Security与AngularJS_React_Vue.js整合：前后端分离的安全实践的全方位教程

const installer = { vm: {}, install (Vue, router = {}) { Vue.use(VueAxios, router, service) } }完整转化vue3.x

vue2项目打包完成后根据访问地址为ip还是域名动态改变.env.production内的参数

vue中生产环境使用.env.development配置axios全局访问路由

vue3原本http://localhost/api/mapping/UserInfo/10001/1 的请求，当切换路由到search后刷新请求变成http://localhost/search/api/mapping/UserInfo/10001/1这种问题如何解决

vue2脚手架，axios的baseURL如何根据环境文件使用，以及使用环境文件的详细步骤，以及npm如何引入env；vue.config.js中切换环境

vue3+vite+ts前端项目，接口地址需要代理两个，如何配置.env.development文件、request.ts文件、vite.config.ts文

vue3+vite+ts前端项目，接口地址代理两个，然后如何配置.env.development文件、request.ts文件、vite.config.ts文件

最新推荐

基于智能温度监测系统设计.doc

搜广推推荐系统中传统推荐系统方法思维导图整理-完整版

GitHub图片浏览插件：直观展示代码中的图像

管理建模和仿真的文件

【OPPO手机故障诊断专家】：工程指令快速定位与解决

求[100，900]之间相差为12的素数对（注：要求素数对的两个素数均在该范围内）的个数

Android IPTV项目：直播频道的实时流媒体实现

"互动学习：行动中的多样性与论文攻读经历"

【OPPO手机工程模式终极指南】：掌握这些秘籍，故障排查不再难！

前端在json文件里写模板，可以换行 有空格现在在文本框的时候

前端在json文件里写模板，可以换行有空格现在在文本框的时候