vue打包完后Nginx代理(解决vue打包后跨域问题)

最新推荐文章于 2025-05-20 11:45:33 发布

原创

最新推荐文章于 2025-05-20 11:45:33 发布 · 3.6w 阅读

17 ·

CC 4.0 BY-SA版权

该博客介绍了如何通过配置Nginx代理解决Vue项目打包后遇到的跨域问题。具体步骤包括修改Vue的index.js文件和Nginx的配置文件，特别是设置`location /api`来代理请求到指定的API服务器。

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

vue index.js文件源码

 
  'use strict' 
 
  // Template version: 1.2.7 
 
  // see http://vuejs-templates.github.io/webpack for documentation. 
 
  const 
  path = 
  require( 
  'path') 
 
  module. 
  exports = { 
   
  dev: { 
   
  // Paths 
 
  assetsSubDirectory: 
  'static', 
 
  assetsPublicPath: 
  '/', 
 
  changeOrigin: 
  true, 
 
  proxyTable: { 
   
  '/api' 
  : { 
   
  target: 
  'https://api.it120.cc/fengyu', 
 
  changeOrigin: 
  true, 
 
  pathRewrite: { 
   
  '^/api' 
  : 
  '' 
 
   } 
 
   }, 
 
  '/book' 
  : { 
   
  target: 
  'http://api.zhuishushenqi.com/', 
 
  changeOrigin: 
  true, 
 
  pathRewrite: { 
   
  '^/book' 
  : 
  '' 
 
   } 
 
   }, 
 
   }, 
 
  // Various Dev Server settings 
 
  host: 
  'localhost', 
  // can be overwritten by process.env.HOST 
 
  port: 
  8080, 
  // can be overwr