详解如何在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 相关文章推荐
用javascript实现点击链接弹出"图片另存为"而不是直接打开
Aug 15 Javascript
javascript html 静态页面传参数
Apr 10 Javascript
javascript 函数调用规则
Aug 26 Javascript
javascript学习笔记(八) js内置对象
Jun 19 Javascript
多个jquery.datatable共存,checkbox全选异常的快速解决方法
Dec 10 Javascript
IE下双击checkbox反应延迟问题的解决方法
Mar 27 Javascript
Node.js文件操作方法汇总
Mar 22 Javascript
JS实现图片剪裁并预览效果
Aug 12 Javascript
详解vue-cli项目中的proxyTable跨域问题小结
Feb 09 Javascript
vue1.0和vue2.0的watch监听事件写法详解
Sep 11 Javascript
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
如何使用CSS3和JQuery easing 插件制作绚丽菜单
Jun 18 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
使用数据库保存session的方法
2006/10/09 PHP
php 操作符与控制结构
2012/03/07 PHP
PHP array_multisort() 函数的深入解析
2013/06/20 PHP
php selectradio和checkbox默认选择的实现方法详解
2013/06/29 PHP
WordPress中用于创建以及获取侧边栏的PHP函数讲解
2015/12/29 PHP
PHP微信网页授权的配置文件操作分析
2019/05/29 PHP
js函数调用常用方法详解
2012/12/03 Javascript
js获取html页面节点方法(递归方式)
2013/12/13 Javascript
深入理解javascript中return的作用
2013/12/30 Javascript
使用javascript为网页增加夜间模式
2014/01/26 Javascript
jQuery+css实现百度百科的页面导航效果
2014/12/16 Javascript
Ionic如何实现下拉刷新与上拉加载功能
2016/06/03 Javascript
利用JS实现数字增长
2016/07/28 Javascript
基于cookie实现zTree树刷新后展开状态不变
2017/02/28 Javascript
JavaScript基础之this详解
2017/06/04 Javascript
javascript兼容性(实例讲解)
2017/08/15 Javascript
微信小程序图片选择区域裁剪实现方法
2017/12/02 Javascript
深入理解ES6中let和闭包
2018/02/22 Javascript
jQuery Ajax async=>false异步改为同步时,解决导致浏览器假死的问题
2019/07/22 jQuery
js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
2019/11/07 Javascript
JS实现炫酷轮播图
2020/11/15 Javascript
[00:53]2015国际邀请赛 中国区预选赛一触即发
2015/05/14 DOTA
[46:53]Secret vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
使用Python的turtle模块画图的方法
2017/11/15 Python
Python的多维空数组赋值方法
2018/04/13 Python
浅谈python中统计计数的几种方法和Counter详解
2019/11/07 Python
Tensorflow中批量读取数据的案列分析及TFRecord文件的打包与读取
2020/06/30 Python
python批量生成身份证号到Excel的两种方法实例
2021/01/14 Python
Html5嵌入钉钉的实现示例
2020/06/04 HTML / CSS
Manuka Doctor美国官网:麦卢卡蜂蜜和蜂毒护肤
2016/12/25 全球购物
《再别康桥》教学反思
2014/02/12 职场文书
文员求职信
2014/07/15 职场文书
党员教师个人对照检查材料范文
2014/09/25 职场文书
三严三实民主生活会发言稿
2014/10/13 职场文书
vue打包时去掉所有的console.log
2022/04/10 Vue.js
python获取带有返回值的多线程
2022/05/02 Python