Vue项目Vite配置代理解决跨域问题

Vite — 一个Vue作者开发的Web开发工具，它具有快速的冷启动、及时的模块热更新、真正的按需加载。

Vite基于浏览器原生 ES imports 的开发服务器。利用浏览器去解析 imports，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。既然这么好，那就赶紧体验下。

1.创建并运行Vue + Vite项目

创建基于Vite的项目比较简单，这里就不多讲了，几行命令搞定。

   

    

     

      

     
     

      

       ## 创建项目
      
     
    

     

      

     
     

      

       yarn create vite-app <project-name>
      
     
    

     

      

     
     

      
 
      
     
    

     

      

     
     

      

       ## 进入项目根目录
      
     
    

     

      

     
     

      

       cd <project-name>
      
     
    

     

      

     
     

      
 
      
     
    

     

      

     
     

      

       ## 安装依赖
      
     
    

     

      

     
     

      

       yarn
      
     
    

     

      

     
     

      
 
      
     
    

     

      

     
     

      

       ## 运行项目
      
     
    

     

      

     
     

      

       yarn dev
      
     
   
  

生成的项目结构也是十分简单，默认是没有vite.config.js。

   

    

     

      

     
     

      

       ├─node_modules      # 项目依赖
      
     
    

     

      

     
     

      

       ├─public            # 公共文件
      
     
    

     

      

     
     

      

       ├─App.vue           # 应用入口
      
     
    

     

      

     
     

      

       ├─index.html        # 页面入口
      
     
    

     

      

     
     

      

       ├─package.json      # 描述文件
      
     
   
  

2.配置代理解决跨域问题

项目创建完成就可以本地运行了。解决跨域问题，还需要编写配置文件。新建vite.config.js。

   

    

     

      

     
     

      

       const path = require('path')
      
     
    

     

      

     
     

      
 
      
     
    

     

      

     
     

      

       module.exports = {
      
     
    

     

      

     
     

      

           hostname: '0.0.0.0',
      
     
    

     

      

     
     

      

           port: 9999,
      
     
    

     

      

     
     

      

           // 反向代理
      
     
    

     

      

     
     

      

           proxy: {
      
     
    

     

      

     
     

      

               '/api': {
      
     
    

     

      

     
     

      

                   target: 'http://xxx.xxxxx.xxx/',
      
     
    

     

      

     
     

      

                   changeOrigin: true,
      
     
    

     

      

     
     

      

                   rewrite: path => path.replace(/^\/api/, '')
      
     
    

     

      

     
     

      

               }
      
     
    

     

      

     
     

      

           }
      
     
    

     

      

     
     

      

       }
      
     
   
  

api这个可以自己定义，target是你需要代理的地址，比如你的请求地址是

http://openapi.nmwap.com/user/login
  

那target里面应该这么写：

target: 'http://openapi.nmwap.com/',
  

编写请求的地方：

   

    

     

      

     
     

      

       import { liSend } from '../utils/request'
      
     
    

     

      

     
     

      
 
      
     
    

     

      

     
     

      

       // 测试请求
      
     
    

     

      

     
     

      

       export const login = (obj) => { return liSend("post", "api/user/login", obj) };
      
     
   
  

这样配置就可以解决项目请求跨域的问题。