详解如何在nuxt中添加proxyTable代理


Posted in Javascript onAugust 10, 2018

背景

在本地开发vue项目的时候,当你习惯了proxyTable解决本地跨域的问题,切换到nuxt的时候,你会发现,添加了proxyTable设置并没有什么作用,那是因为你是用的vue脚手架生成的vue项目,它里面已经帮你写好了相关的proxyTable的设置代码。

build/dev-server.js

// proxy api requests
Object.keys(proxyTable).forEach(function (context) {
 var options = proxyTable[context]
 if (typeof options === 'string') {
  options = { target: options }
 }
 app.use(proxyMiddleware(options.filter || context, options))
})

这里是采用的express中间件的形式,使用的依赖是http-proxy-middleware

nuxt也有中间件的概念,不过这个中间件不是express的中间件,那么我们怎么添加到nuxt里面去呢?

怎么做

首先,安装依赖

npm install --save-dev express http-proxy-middleware

然后在根目录创建一个文件server.js

const { Nuxt, Builder } = require('nuxt')
const app = require('express')()
var proxyMiddleware = require('http-proxy-middleware')
var config = require('./nuxt.config')
// 我们用这些选项初始化 Nuxt.js:
const isProd = process.env.NODE_ENV === 'production'
const nuxt = new Nuxt({ dev: !isProd })
// 生产模式不需要 build
if (!isProd) {
 const builder = new Builder(nuxt)
 builder.build()
}

// proxy api requests这里就是添加的proxyTable中间价的设置了
var proxyTable = config.dev.proxyTable
Object.keys(proxyTable).forEach(function (context) {
  var options = proxyTable[context]
  if (typeof options === 'string') {
   options = { target: options }
  }
  app.use(proxyMiddleware(options.filter || context, options))
 })
app.use(nuxt.render)//这里是添加nuxt渲染层服务的中间件



app.listen(3000)
console.log('Server is listening on http://localhost:3000')

然后在nuxt.config.js中添加如下代码

module.exports = {
  dev: {
  proxyTable: {
     '/api':
      {
        target: 'http://localhost:7001', // 
        pathRewrite: { '^/api': '/' }
      }
    }
   }
}

然后node server.js运行就可以了。

觉得运行不方便还可以把命令添加到package.json文件里。

{
   "scripts": {
    "dev": "nuxt --port=8080",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "precommit": "npm run lint",
    "server": "node server.js"
  }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
AJAX异步从优酷专辑中采集所有视频及信息(JavaScript代码)
Nov 20 Javascript
js创建数据共享接口——简化框架之间相互传值
Oct 23 Javascript
基于jQuery实现模拟页面加载进度条
Apr 01 Javascript
JavaScript不刷新实现浏览器的前进后退功能
Nov 05 Javascript
JavaScript中操作字符串之localeCompare()方法的使用
Jun 06 Javascript
JavaScript使用DeviceOne开发实战(一) 配置和起步
Dec 01 Javascript
实例解析Array和String方法
Dec 14 Javascript
AngularJS使用angular.bootstrap完成模块手动加载的方法分析
Jan 19 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
Aug 18 Javascript
Vue v2.4中新增的$attrs及$listeners属性使用教程
Jan 08 Javascript
jquery实现Ajax请求的几种常见方式总结
May 28 jQuery
基于JS实现父组件的请求服务过程解析
Oct 14 Javascript
解决bootstrap中下拉菜单点击后不关闭的问题
Aug 10 #Javascript
快速解决bootstrap下拉菜单无法隐藏的问题
Aug 10 #Javascript
详解Vue+axios+Node+express实现文件上传(用户头像上传)
Aug 10 #Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
Aug 10 #Javascript
Bootstrap模态对话框中显示动态内容的方法
Aug 10 #Javascript
解决bootstrap-select 动态加载数据不显示的问题
Aug 10 #Javascript
使用bootstrap实现下拉框搜索功能的实例讲解
Aug 10 #Javascript
You might like
推荐几部必看的DC动画电影
2020/03/03 欧美动漫
一个简洁的多级别论坛
2006/10/09 PHP
php实现的zip文件内容比较类
2014/09/24 PHP
学习php设计模式 php实现适配器模式
2015/12/07 PHP
php中__toString()方法用法示例
2016/12/07 PHP
php设计模式之备忘模式分析【星际争霸游戏案例】
2020/03/24 PHP
关于Javascript 的 prototype问题。
2007/01/03 Javascript
一个报数游戏js版(约瑟夫环问题)
2010/08/05 Javascript
jquery mobile实现拨打电话功能的几种方法
2013/08/05 Javascript
jQuery+jRange实现滑动选取数值范围特效
2015/03/14 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
2015/10/09 Javascript
jQuery使用$.each遍历json数组的简单实现方法
2016/04/18 Javascript
AngularJS 中文API参考手册
2016/07/28 Javascript
全面解析标签页的切换方式
2016/08/21 Javascript
AngularJs  E2E Testing 详解
2016/09/02 Javascript
JS实现课堂随机点名和顺序点名
2017/03/09 Javascript
详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件
2018/08/02 Javascript
Vuejs 实现简易 todoList 功能 与 组件实例代码
2018/09/10 Javascript
vue结合element-ui使用示例
2019/01/24 Javascript
vuex存值与取值的实例
2019/11/06 Javascript
[01:37]TI4西雅图DOTA2前线报道 VG拿下首胜教练357给出获胜秘诀
2014/07/10 DOTA
使用Python构建Hopfield网络的教程
2015/04/14 Python
使用python编写简单的小程序编译成exe跑在win10上
2018/01/15 Python
pandas系列之DataFrame 行列数据筛选实例
2018/04/12 Python
对python程序内存泄漏调试的记录
2018/06/11 Python
python 公共方法汇总解析
2019/09/16 Python
聊聊python中的异常嵌套
2020/09/01 Python
意大利时尚奢侈品店:D’Aniello Boutique
2021/01/19 全球购物
机械专业应届生求职信
2013/09/21 职场文书
银行开业庆典方案
2014/02/06 职场文书
教师师德反思材料
2014/02/15 职场文书
2014年健康教育实施方案
2014/02/17 职场文书
2014年最新版离婚协议书范本
2014/11/25 职场文书
硕士学位申请报告
2015/05/15 职场文书
中学生国庆节演讲稿2015
2015/07/30 职场文书
深入理解pytorch库的dockerfile
2022/06/10 Python