详解如何在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 相关文章推荐
模仿JQuery sortable效果 代码有错但值得看看
Nov 05 Javascript
js 中 document.createEvent的用法
Aug 29 Javascript
javascript中xml操作实现代码
Nov 21 Javascript
js获取当前日期时间及其它操作汇总
Apr 17 Javascript
基于jQuery实现搜索关键字自动匹配功能
Mar 26 Javascript
JS模拟的Map类实现方法
Jun 17 Javascript
纯JS前端实现分页代码
Jun 21 Javascript
微信开发 使用picker封装省市区三级联动模板
Oct 28 Javascript
JavaScript中Object值合并方法详解
Dec 22 Javascript
js提取中文拼音首字母的封装工具类
Mar 12 Javascript
vue 注册组件的使用详解
May 05 Javascript
用vscode开发vue应用的方法步骤
May 06 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
杏林同学录(九)
2006/10/09 PHP
PHP调用.NET的WebService 简单实例
2015/03/27 PHP
php使用 readfile() 函数设置文件大小大小的方法
2017/08/11 PHP
PHP去除空数组且数组键名重置的讲解
2019/02/28 PHP
php给数组赋值的实例方法
2019/09/26 PHP
jQuery中:empty选择器用法实例
2014/12/30 Javascript
jQuery内容过滤选择器用法分析
2015/02/10 Javascript
详解JavaScript中|单竖杠运算符的使用方法
2016/05/23 Javascript
详解Vue改变数组中对象的属性不重新渲染View的解决方案
2018/09/21 Javascript
node和vue实现商城用户地址模块
2018/12/05 Javascript
微信小程序入门之广告条实现方法示例
2018/12/05 Javascript
js实现双人五子棋小游戏
2020/05/28 Javascript
JS数据类型判断的几种常用方法
2020/07/07 Javascript
vue-router之解决addRoutes使用遇到的坑
2020/07/19 Javascript
node使用async_hooks模块进行请求追踪
2021/01/28 Javascript
[05:40]DOTA2荣耀之路6:Wings最后进攻
2018/05/30 DOTA
剖析Django中模版标签的解析与参数传递
2015/07/21 Python
python使用itchat库实现微信机器人(好友聊天、群聊天)
2018/01/04 Python
Windows环境下python环境安装使用图文教程
2018/03/13 Python
python pandas库中DataFrame对行和列的操作实例讲解
2018/06/09 Python
使用pandas实现csv/excel sheet互相转换的方法
2018/12/10 Python
Python高阶函数、常用内置函数用法实例分析
2019/12/26 Python
python判断元素是否存在的实例方法
2020/09/24 Python
前端实现背景虚化但内容清晰且自适应 的实例代码
2019/08/01 HTML / CSS
Html5之webcoekt播放JPEG图片流
2020/09/22 HTML / CSS
英国奢侈品网站:MatchesFashion
2016/12/16 全球购物
台湾乐天市场:日本No.1的网路购物网站
2017/03/22 全球购物
招聘单位介绍信
2014/01/14 职场文书
大学毕业感言一句话
2014/02/06 职场文书
2014年团支书工作总结
2014/11/14 职场文书
2014年数学教研组工作总结
2014/12/06 职场文书
关于拾金不昧的感谢信
2015/01/21 职场文书
新郎新娘致辞
2015/07/31 职场文书
初中政治教学反思
2016/02/23 职场文书
2019让人心动的商业计划书
2019/06/27 职场文书
SQL语法CONSTRAINT约束操作详情
2022/01/18 MySQL