vue中在vue.config.js中配置绝对路径和全局样式引入和跨域问题配置

最新推荐文章于 2025-03-25 15:20:33 发布

置顶奘倥城

最新推荐文章于 2025-03-25 15:20:33 发布

阅读量3.1k

点赞数

分类专栏：前端文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/weixin_45178761/article/details/103934368

版权

前端专栏收录该内容

14 篇文章

订阅专栏

本文介绍了如何在Vue项目中进行配置，包括在vue.config.js中设置绝对路径以便于文件引用，实现全局样式引入以简化样式管理，以及详细讲解解决跨域问题的配置步骤，帮助开发者提升开发效率。

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

1：配置绝对路径

configureWebpack: {        
	resolve: {           
		 alias: {               
		 	 '@': path.join(__dirname, 'src'),                
		 	 'components': path.join(__dirname, 'src/components'),                
		 	 'common': path.join(__dirname, 'src/common')           
		 	  }        
			}   
		 }

2：全局样式引入

 css: {        
 		loaderOptions: {            
 				stylus: {                
 					import: ['~@/common/stylus/mixin.styl', '~@/common/stylus/variable.styl']            
 					}        
 				}    
 			}

3：跨域问题配置

 devServer: { //跨域配置        
 		proxy: {            
 			'/api': {                
 					target: "https://c.y.qq.com/musichall/fcgi-bin/",      
 					ws: true,
					changOrigin: true,            
                    pathRewrite: {                 
 					      '^/api': ''               
 					     }            
 					   }        
 					},        
 	before(app) {            
 	       	app.get('/api/getDiscList', (req, res) => {               
 	       				 var url = 'https://c.y.qq.com/splcloud/fcgi-bin/'                
 	       				 	axios.get(url, {                    
 	       				 				headers: {                       
 	       				 						 referer: 'https://c.y.qq.com/',                        
 	       				 						 host: 'c.y.qq.com'                   
 	       				 					 },                    
 	       				 			params: req.query                
 	       				 		}).then((response) => {                   
 	       				 			 res.json(response.data)               
 	       				 		 }).catch((e) => {                    
 	       				 	// console.log(e)               
 	       				  })            
 	       			})       
 	       	 }