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

最新推荐文章于 2023-10-09 17:18:48 发布
最新推荐文章于 2023-10-09 17:18:48 发布
阅读量5.8k 收藏 3
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/liumiaomiao1991/article/details/79567511
版权
本文探讨了在使用 Vue CLI 创建的项目中，如何处理在开发和生产环境请求不同域名的问题，主要介绍了两种方法，并推荐了其中一种简便的实现方式。文章来自北大青鸟学校开发小组，欢迎交流和指正。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

使用  vue-cli 开发项目过程中, 根据开发环境和正式环境不同, 我们往往需要请求不同域名下的后台接口, 这时候, 该怎么去设置, 达到同一种写法可以根据环境不同而自动切换请求域名呢? 本文将会介绍两种配置方式.

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

一

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

                

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        


    



                



	

		

			

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

				
			

			

				

					qianzaizai_的博客
				

				

					06-11
					
					1229
					
				

			

		

		

			
				
上一章节，我们讲了小程序得模块化，怎么封装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
					
					1468
					
				

			

		

		

			
				
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
					
					6314
					
				

			

		

		

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

			
		

	





	

		

			

				
					
vue.config配置多个地址跨域

				
			

			

				

					weixin_45439337的博客
				

				

					02-17
					
					4968
					
				

			

		

		

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

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

			
		

	



		

			
		



	

		

			

				
					
vue cli3 配置多个环境

				
			

			

				

					wangooo的博客
				

				

					08-30
					
					1323
					
				

			

		

		

			
				
在项目开发的各个阶段，比如：开发环境、测试环境、生产环境，我们需要为项目指定不同的一些配置信息。比如接口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 服务器是将构建后的静态...

			
		

	





	

		

			

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

				
			

			

				

					11-26
				

			

		

		

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

			
		

	





	

		

			

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

				
			

			

				

					08-27
				

			

		

		

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

			
		

	





	

		

			

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

				
			

			

				

					weixin_30517001的博客
				

				

					07-01
					
					292
					
				

			

		

		

			
				
在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
					
					2834
					
				

			

		

		

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

			
		

	





	

		

			

				
					
vue cli3.0 怎么配置 后端请求接口域名，区别打包环境及 vue项目域名的问题

				
			

			

				

					MISS_zhang_0110的博客
				

				

					07-26
					
					6743
					
				

			

		

		

			
				
=>使用域名加端口号访问http//www.test.com1234。在src同级建立一个vue.config.js文件。和src同级建立两个文件。

			
		

	





	

		

			

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

				
			

			

				

					yorcentroll的博客
				

				

					05-22
					
					3590
					
				

			

		

		

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

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



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



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

然后在vueConfig 对象..

			
		

	





	

		

			

				
					
Vue 多环境变量的配置

				
			

			

				

					努力
				

				

					08-26
					
					2334
					
				

			

		

		

			
				
为什么配置多环境变量呢？

    在我们开发的过程中，会有多个不同的访问环境比如：开发环境 、 生产环境 等等。在每一种环境下所需要访问的域名都是不一样的，所以可以通过配置多环境变量来解决这一问题。

一、在Vue中首先找到 package.json 文件







二、找到文件中的scripts添加新的配置


"scripts":{

"serve":"vue-cli-serviceserve--open", //npm run serve 启动项目

......

			
		

	





	

		

			

				
					
@vue/cli3--多环境配置(模式和环境变量)--使用/实例

				
			

			

				

					IT利刃出鞘的博客
				

				

					06-22
					
					2065
					
				

			

		

		

			
				
本文用实例介绍如何用vue-cli3.0配置多环境。

本文介绍的方法适用于vue-cli的这些版本：@vue/cli3.0，@vue/cli4.0。

			
		

	





	

		

			

				
					
Vue CLI多环境配置

				
			

			

				

					qq_43265564的博客
				

				

					10-22
					
					838
					
				

			

		

		

			
				
在公司中，我们的项目有本地环境，还有测试环境和正式发布环境，所以我们需要为项目配置多环境的配置来启动不同的环境下对应的文件。这里参考的项目是该博客搭建的项目Idea创建Vue CLI

一.增加开发和生成多环境配置
二.修改启动和编译多环境
三.修改axios请求地址支持多环境

我们的本地请求路径都是localhost写死的，但有的时候测试环境等路径是其他路径所以我们需要进行配置。
在web项目下新建一个文件



然后选择text就好了

然后在创建的文件里面，首选配置环境变量，是开发环境：

NOD.

			
		

	





	

		

			

				
					
vue配置开发环境和生产环境调用不同的域名以及跨域问题

					
热门推荐

				
			

			

				

					qq_26282869的博客
				

				

					01-11
					
					1万+
					
				

			

		

		

			
				

注意: 这里vue项目与后端是前后端完全分离的,所有请求后端的地址是不一样的

安装axios
npm install axios

然后
npm install --save axios vue-axios

用到post请求时，需要安装qs
import qs from 'qs'

在main.js引入axios
import axios from 'axios'
import VueAxi...

			
		

	





	

		

			

				
					
vue跨域解决方法

				
			

			

				

					王永存
				

				

					10-14
					
					5345
					
				

			

		

		

			
				
vue跨域解决方法

vue项目中，前端与后台进行数据请求或者提交的时候，如果后台没有设置跨域，前端本地调试代码的时候就会报“No 'Access-Control-Allow-Origin' header is present on the requested resource.” 这种跨域错误。

 



 

要想本地正常的调试，解决的办法有三个：

 

一、后台更改header

 

...

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值