详解如何在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的对话框详解与参数
Mar 08 Javascript
JS动画效果代码3
Apr 03 Javascript
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
Apr 15 Javascript
Jquery多选框互相内容交换的实例代码
Jul 04 Javascript
JS实现仿Windows经典风格的选项卡Tab切换代码
Oct 20 Javascript
js精准的倒计时函数分享
Jun 29 Javascript
如何理解Vue的作用域插槽的实现原理
Aug 19 Javascript
npm 更改默认全局路径以及国内镜像的方法
May 16 Javascript
在vue项目中集成graphql(vue-ApolloClient)
Sep 08 Javascript
webpack打包多页面的方法
Nov 30 Javascript
Vue侦测相关api的实现方法
May 22 Javascript
详解element-ui动态限定的日期范围选择器代码片段
Jul 03 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
php切割页面div内容的实现代码分享
2012/07/31 PHP
浅谈PDO的rowCount函数
2015/06/18 PHP
php使用get_class_methods()函数获取分类的方法
2016/07/20 PHP
php微信公众平台示例代码分析(二)
2016/12/06 PHP
php多进程并发编程防止出现僵尸进程的方法分析
2020/02/28 PHP
JavaScript中为元素加上name属性的方法
2011/05/09 Javascript
event.X和event.clientX的区别分析
2011/10/06 Javascript
Uglifyjs(JS代码优化工具)入门 安装使用
2020/04/13 Javascript
JavaScript实现SHA-1加密算法的方法
2015/03/11 Javascript
jquery插件bxslider用法实例分析
2015/04/16 Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
2016/01/26 Javascript
详解Javascript函数声明与递归调用
2016/10/22 Javascript
Jqprint实现页面打印
2017/01/06 Javascript
Angularjs 依赖压缩及自定义过滤器写法
2017/02/04 Javascript
关于angular js_$watch监控属性和对象详解
2017/04/24 Javascript
Angular实现表单验证功能
2017/11/13 Javascript
ES6 系列之 WeakMap的使用示例
2018/08/06 Javascript
详解如何在Angular优雅编写HTTP请求
2018/12/05 Javascript
JavaScript中import用法总结
2019/01/20 Javascript
通过实例了解Render Props回调地狱解决方案
2020/11/04 Javascript
JavaScript字符串转数字的简单实现方法
2020/11/27 Javascript
Django中实现一个高性能计数器(Counter)实例
2014/07/09 Python
python使用webdriver爬取微信公众号
2018/08/31 Python
python学习之hook钩子的原理和使用
2018/10/25 Python
Linux下Pycharm、Anaconda环境配置及使用踩坑
2018/12/19 Python
解决python3.5 正常安装 却不能直接使用Tkinter包的问题
2019/02/22 Python
PyCharm配置anaconda环境的步骤详解
2020/07/31 Python
Python根据URL地址下载文件并保存至对应目录的实现
2020/11/15 Python
世界首屈一指的在线男士内衣权威:HisRoom
2017/08/05 全球购物
公司成本主管岗位责任制
2014/02/21 职场文书
《梅兰芳学艺》教学反思
2014/02/24 职场文书
医德医魂心得体会
2014/09/11 职场文书
2015年安全生产工作总结范文
2015/04/02 职场文书
靠谱准确的求职信
2019/04/02 职场文书
教你怎么用Python监控愉客行车程
2021/04/29 Python
go goroutine 怎样进行错误处理
2021/07/16 Golang