vue项目development(开发)和production(生产)模式搭建代理服务器

1.development(开发)模式搭建代理服务器(vue脚手架项目)

vue.config.js 文件下:devServer配置中添加proxy项

 devServer: {
    proxy: {
      // 如果请求地址以/api打头,就触发代理机制 浏览器向代理服务器发送请求 再由代理服务器向本来的服务器发送请求
      '/api': {
        target: 'http://localhost:3000'  //  需要代理的后端服务器地址
      }
    }
  },

2.production(生产)模式搭建代理服务器(node.js + koa)

koa简介

Koa 是一个新的 web 框架，由 Express 幕后的原班人马打造， 致力于成为 web 应用和 API 开发领域中的一个更小、更富有表现力、更健壮的基石。 通过利用 async 函数，Koa 帮你丢弃回调函数，并有力地增强错误处理。 Koa 并没有捆绑任何中间件， 而是提供了一套优雅的方法，帮助您快速而愉快地编写服务端应用程序。

我们已经完成了一个前端工程师的开发流程，按照常规的做法，此时，运维/后端会将我们的代码部署到阿里云的 nginx服务上，对于我们而言，我们可以将其部署到本机的nodejs环境中,步骤如下:

1.使用 koa 框架部署项目

1. 建立web服务文件夹 Server

2. 在该文件夹下, 初始化npm生成 package.json 和 package-lock.json文件
   npm init -y

3. 安装相关依赖包:

   npm install koa koa-static //安装服务端框架 koa

   npm install koa-static //安装托管静态资源koa-static

   npm install koa2-connect-history-api-fallback //专门处理history模式的中间件

   npm install koa2-proxy-middleware // 安装跨域代理中间件

4. Server文件夹中新建public文件夹，并拷贝项目打包的dist目录内容，到Server/public目录下

5. 在**Server**根目录下创建app.js文件,此时目录结构如下:

2.搭建代理服务器

// 导入相关依赖
const Koa  = require('koa')
const serve = require('koa-static');
const { historyApiFallback } = require('koa2-connect-history-api-fallback');
const proxy = require('koa2-proxy-middleware')
const app = new Koa();

app.use(proxy({
  targets: {
    '/api/(.*)': {
        target: 'http://www.baidu.com', //  需要代理的后端服务器地址
        changeOrigin: true
    }
  }
}))

// 解决vue路由history模式问题
app.use(historyApiFallback({ 
  whiteList: ['/api']
}));  

//将public下的代码静态化
app.use(serve(__dirname + "/public")); 

app.listen(3333, () => {
  console.log('代理服务器启动于3333')
})

3.运行代理服务器访问项目

1. 在终端运行ipconfig命令查看代理服务器IP地址:

2. 在终端运行node app.js启动代理服务器,如图:

3.使用获得的IP地址和端口号在浏览器访问我们开发好的项目:
192.168.1.6:3333 得到public目录下的页面内容: