vue-cli 搭建的项目处理不同环境下请求不同域名的问题

最新推荐文章于 2024-06-10 14:40:08 发布
最新推荐文章于 2024-06-10 14:40:08 发布
阅读量5.7k 收藏 3
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liumiaomiao1991/article/details/79567511
版权
使用  vue-cli 开发项目过程中, 根据开发环境和正式环境不同, 我们往往需要请求不同域名下的后台接口, 这时候, 该怎么去设置, 达到同一种写法可以根据环境不同而自动切换请求域名呢? 本文将会介绍两种配置方式.

本文中所有请求都是使用 axios

一

1、修改  config/dev.env.js (开发环境的配置) 

                

        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  liumiaomiao1991
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    1
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    3
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
项目不同环境配置不同接口域名—小程序入门与实战（十二）

				
			

			

				

					qianzaizai_的博客
				

				

					06-11
					
					1140
					
				

			

		

		

			
				
上一章节，我们讲了小程序得模块化，怎么封装wx.request来发送请求。
这一章节我们讲的是开发项目过程中在开发环境，生产环境设置不同得请求接口域名。
新建 config.js
在 src/es6 目录，新建一个config.js文件
export default {
    BRAND:{
        name:'guojiangxiansir'
    },
    GLOBAL: {
        baseUrl: process.env.NODE_ENV === 'd

			
		

	



                

              
                



	

		

			

				
					
vue 多个api请求_vue-cli3 想请求多个不同域名的接口，配置是这样吗？如果到生产环境中再该如何配置呢？...

				
			

			

				

					weixin_42513054的博客
				

				

					01-14
					
					1379
					
				

			

		

		

			
				
vue-cli3 想请求多个不同域名的接口，配置是这样吗？如果到生产环境中再该如何配置呢？我的vue.config.js文件是这样配置的var webpack = require("webpack");module.exports = {publicPath: process.env.NODE_ENV === 'production' ? './' : '/',devServer: {proxy:...

			
		

	



                


  
              

                


	

		

			

				
					
Ruoyi-Vue处理跨域问题、同时请求多个域名接口(前端处理)

				
			

			

				

					qq_34746960的博客
				

				

					10-09
					
					4098
					
				

			

		

		

			
				
Ruoyi-Vue项目请求不同地址的接口，主要在于处理跨域问题，即vue.config.js文件处理。

			
		

	





	

		

			

				
					
vue项目中不同接口使用不同的域名

					
最新发布

				
			

			

				

					温暖前端的博客
				

				

					06-10
					
					346
					
				

			

		

		

			
				
在Vue项目中，可以通过配置axios（或者其他HTTP请求库）来实现不同接口使用不同域名的接口。

			
		

	



		

			
		



	

		

			

				
					
vue.config配置多个地址跨域

				
			

			

				

					weixin_45439337的博客
				

				

					02-17
					
					4705
					
				

			

		

		

			
				
本博客是本人在开发过程中遇到问题所积累下的经验

在前端想要实现跨域
在前端使用接口的时候，如果需要使用来源不同的接口,可以在vue.config配置多个跨域。	例如下面例子中的两个配置，一个是局域网内的接口，一个是部署在外网上的接口。在使用时根据axios的baseURL进行匹配,两个axios可以写在一个文件里，create两个axios，根据其是否需要token详细配置。
代码如下（示例）：
  devServer: {
    port: 8080,
    proxy: {
      '/zjg

			
		

	





	

		

			

				
					
vue cli3 配置多个环境

				
			

			

				

					wangooo的博客
				

				

					08-30
					
					1231
					
				

			

		

		

			
				
在项目开发的各个阶段，比如：开发环境、测试环境、生产环境，我们需要为项目指定不同的一些配置信息。比如接口api的域名，在开发环境中是开发服务器，在上线之后需要切换到正式服务器。这个时候我们就需要管理环境下的配置文件信息。



env文件说明

.env：默认全局配置文件
	.env.local：本地覆盖。除 test 之外的所有环境都加载此文件
	.env.development, .env.test, .env.production：特定环境配置文件
	.env.development.local, .

			
		

	





	

		

			

				
					
详解基于Vue-cli搭建的项目如何和后台交互

				
			

			

				

					08-27
				

			

		

		

			
				
基于Vue-cli搭建的项目如何和...本文详细介绍了如何使用Vue-cli搭建的项目与后台进行交互，包括跨域访问后台接口和配置适用于本地和生产环境的后台请求。希望本文能够对大家的学习有所帮助，也希望大家多多支持我们。

			
		

	





	

		

			

				
					
Vue-cli项目部署到Nginx服务器的方法

				
			

			

				

					10-16
				

			

		

		

			
				
Vue CLI 是一个基于 Vue.js 的命令行工具，用于快速搭建现代化的 Vue.js 应用。它提供了便捷的脚手架，用于生成配置化的构建流程，包括编译、热重载、代码分割等。Vue CLI 项目部署到 Nginx 服务器是将构建后的静态...

			
		

	





	

		

			

				
					
vue-cli开发环境实现跨域请求的方法

				
			

			

				

					08-27
				

			

		

		

			
				
Vue CLI 是一个基于 Vue.js 的命令行工具，它提供了一个快速搭建项目开发环境的解决方案。在使用 Vue CLI 开发时，与后端 API 交互时经常会遇到跨域问题，本文将详细介绍如何在 Vue CLI 开发环境中配置代理来解决这...

			
		

	





	

		

			

				
					
nginx部署访问vue-cli搭建的项目的方法

				
			

			

				

					11-26
				

			

		

		

			
				
在IT行业中，前端开发人员经常使用Vue.js框架来构建单页应用...通过这种方式，Nginx作为反向代理服务器，不仅解决了`history`模式下的404问题，还能够有效地处理跨域请求，确保Vue CLI构建的项目在生产环境中顺利运行。

			
		

	





	

		

			

				
					
vue-cli3配置与跨域处理方法

				
			

			

				

					10-16
				

			

		

		

			
				
Vue CLI 3 是 Vue.js 官方提供的一个现代化的构建工具，用于快速搭建 Vue.js 项目。相较于 Vue CLI 2，它提供了更快的初始化速度、更简洁的配置以及更强大的功能。本文将详细介绍 Vue CLI 3 的安装、配置，以及如何...

			
		

	





	

		

			

				
					
vue-cli配置域名，解决开发环境的跨域问题

				
			

			

				

					weixin_30517001的博客
				

				

					07-01
					
					263
					
				

			

		

		

			
				
在vue-cli的config文件下的index.js里有一个参数叫proxyTable；
这里要注意：
dev就是你开发环境，也就是npm run dev;build就是发布也就是生产环境，没有其他多余的东西。也就是npm run build;你要注意dev和build所用的webpack配置是不同的。

proxyTable: {
  '/list': {
    target: ...

			
		

	





	

		

			

				
					
VUE-——vue-cli 搭建的项目处理不同环境下请求不同域名的问题

				
			

			

				

					小欣儿的专栏
				

				

					10-15
					
					2756
					
				

			

		

		

			
				
使用 vue-cli 开发项目过程中, 根据开发环境和正式环境不同, 我们往往需要请求不同域名下的后台接口, 这时候, 该怎么去设置, 达到同一种写法可以根据环境不同而自动切换请求域名呢? 本文将会介绍两种配置方式。
本文中所有请求都是使用 axios
一、设置多种开发环境域名
修改 config/dev.env.js (开发环境的配置)
'use strict'
const merge = re...

			
		

	





	

		

			

				
					
vue配置不同的工作环境

				
			

			

				

					buchishutiao的博客
				

				

					12-08
					
					949
					
				

			

		

		

			
				
配置不用的工作环境

			
		

	





	

		

			

				
					
vue - 多环境配置总结

				
			

			

				

					weixin_44799030的博客
				

				

					01-09
					
					504
					
				

			

		

		

			
				
【代码】vue - 多环境配置总结。

			
		

	





	

		

			

				
					
vue-cli3 多环境和多后端的跨域代理配置 多种实现方案

				
			

			

				

					yorcentroll的博客
				

				

					05-22
					
					3306
					
				

			

		

		

			
				
大家都知道，由于3.x的默认配置都转移到了CLI service，所以生成的项目中并没有默认配置文件，所以我们如果需要自定义一些项目配置，则需要自己在项目的根目录创建一个vue.config.js。

vue.config.js里的配置项所有都是可选的，这就避免了我们去看一大堆不必要的默认配置，只需要配置自己需要的部分就行了。



本文只对跨域代理这一部分的配置进行分析和讲解。



我们在vue.config.js文件中创建一个vueConfig 对象，并将其导出。

然后在vueConfig 对象..

			
		

	





	

		

			

				
					
vue配置多个运行环境、打包环境，通过运行指令切换环境，通过切换环境控制对应环境的参数

				
			

			

				

					mrliucx的博客
				

				

					04-29
					
					6643
					
				

			

		

		

			
				
01.配置环境
1.创建开发环境、测试环境、生产环境文件

2.给文件配置接口基础API，添加对应环境的所需参数，以生产环境为例

02.静态参数值跟随环境变化
1.环境配置文件中添加了两个参数（代理、websocket）
#开发环境nginx代理路径
VUE_APP_BASE_URL = 'manage-web-dev'

#开发环境websocket
VUE_APP_WEBSOCKET = '192.168.xx.xx:8080'

2.添加的环境参数为VUE_APP_BASE_URL、VUE_APP_

			
		

	





	

		

			

				
					
vue项目配置域名访问

					
热门推荐

				
			

			

				

					Vv的博客
				

				

					03-16
					
					2万+
					
				

			

		

		

			
				
一，配置

配置文件project_vue/config/index.js

找到
host:    (填写域名)
port:   （填写端口）





二，报错





三，解决报错

在/etc/hosts增加本地解析 （windows自行找hosts文件位置）

0.0.0.0 xxx.yuming.com   (这是允许所有ip访问)



四，重启...

			
		

	





	

		

			

				
					
vue-cli3项目搭建与优化全攻略

				
			

			

				

					
				

			

		

		

			
				
在本文中，我们将深入探讨如何使用vue-cli3从零开始搭建一个Vue.js项目，并逐步对其进行优化。Vue CLI 3 是 Vue.js 官方提供的一个命令行工具，它极大地简化了 Vue 项目的初始化和构建流程。以下是详细的步骤：  ...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值