详解如何在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 相关文章推荐
用js判断浏览器是否是IE的比较好的办法
May 08 Javascript
读jQuery之十四 (触发事件核心方法)
Aug 23 Javascript
ie8 不支持new Date(2012-11-10)问题的解决方法
Jul 31 Javascript
javascript通过navigator.userAgent识别各种浏览器
Oct 25 Javascript
jquery ajax跨域解决方法(json方式)
Feb 04 Javascript
jQuery取得设置清空select选择的文本与值
Jul 08 Javascript
javascript判断移动端访问设备并解析对应CSS的方法
Feb 05 Javascript
javascript简单实现类似QQ头像弹出效果的方法
Aug 03 Javascript
浅谈Javascript中的函数、this以及原型
Oct 09 Javascript
Vue高版本中一些新特性的使用详解
Sep 25 Javascript
如何解决日期函数new Date()浏览器兼容性问题
Sep 11 Javascript
jquery+css3实现的经典弹出层效果示例
May 16 jQuery
解决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
php二分法在IP地址查询中的应用
2008/08/12 PHP
PHP使用MPDF类生成PDF的方法
2015/12/08 PHP
PHP中的empty、isset、isnull的区别与使用实例
2019/03/22 PHP
jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
2011/10/01 Javascript
理解JavaScript的prototype属性
2012/02/11 Javascript
jquery选择器的选择使用及性能介绍
2013/01/16 Javascript
jQuery自定义添加"$"与解决"$"冲突的方法
2015/01/19 Javascript
JS实现的适合做faq或menu滑动效果示例
2016/11/17 Javascript
JavaScript限定范围拖拽及自定义滚动条应用(3)
2017/05/17 Javascript
Node.JS利用PhantomJs抓取网页入门教程
2017/05/19 Javascript
js实现带进度条提示的多视频上传功能
2020/12/13 Javascript
JS实现瀑布流布局
2017/10/21 Javascript
微信小程序websocket实现聊天功能
2020/03/30 Javascript
使用javascript做时间倒数读秒功能的实例
2019/01/23 Javascript
Angular实现svg和png图片下载实现
2019/05/05 Javascript
TypeScript高级用法的知识点汇总
2019/12/17 Javascript
使用Vue 自定义文件选择器组件的实例代码
2020/03/04 Javascript
vue使用require.context实现动态注册路由
2020/12/25 Vue.js
Python压缩和解压缩zip文件
2015/02/14 Python
用map函数来完成Python并行任务的简单示例
2015/04/02 Python
python 实现数组list 添加、修改、删除的方法
2018/04/04 Python
详解python路径拼接os.path.join()函数的用法
2019/10/09 Python
Python变量作用域LEGB用法解析
2020/02/04 Python
python之生成多层json结构的实现
2020/02/27 Python
Python threading模块condition原理及运行流程详解
2020/10/05 Python
pycharm + django跨域无提示的解决方法
2020/12/06 Python
加拿大女包品牌:Matt & Nat
2017/05/12 全球购物
函数只定义了一次, 调用了一次, 但编译器提示非法重定义了-什么问题?
2014/10/03 面试题
机械设计制造专业个人求职信
2013/09/25 职场文书
小学教师学期末自我评价
2013/09/25 职场文书
《望洞庭》教学反思
2014/02/16 职场文书
餐饮商业计划书范文
2014/04/29 职场文书
护士长竞聘演讲稿
2014/04/30 职场文书
高中生军训感言
2015/08/01 职场文书
python爬取企查查企业信息之selenium自动模拟登录企查查
2021/04/08 Python
redis三种高可用方式部署的实现
2021/05/11 Redis