详解如何在nuxt中添加proxyTable代理
背景
在本地开发vue项目的时候，当你习惯了proxyTable解决本地跨域的问题，切换到nuxt的时候，你会发现，添加了proxyTable设置并没有什么作用，那是因为你是用的vue脚手架生成的vue项目，它里面已经帮你写好了相关的proxyTable的设置代码。
build/dev-server.js
//proxyapirequests
Object.keys(proxyTable).forEach(function(context){
varoptions=proxyTable[context]
if(typeofoptions==='string'){
options={target:options}
}
app.use(proxyMiddleware(options.filter||context,options))
})
这里是采用的express中间件的形式，使用的依赖是http-proxy-middleware
nuxt也有中间件的概念，不过这个中间件不是express的中间件，那么我们怎么添加到nuxt里面去呢？
怎么做
首先，安装依赖
npminstall--save-devexpresshttp-proxy-middleware
然后在根目录创建一个文件server.js
const{Nuxt,Builder}=require('nuxt')
constapp=require('express')()
varproxyMiddleware=require('http-proxy-middleware')
varconfig=require('./nuxt.config')
//我们用这些选项初始化Nuxt.js：
constisProd=process.env.NODE_ENV==='production'
constnuxt=newNuxt({dev:!isProd})
//生产模式不需要build
if(!isProd){
constbuilder=newBuilder(nuxt)
builder.build()
}
//proxyapirequests这里就是添加的proxyTable中间价的设置了
varproxyTable=config.dev.proxyTable
Object.keys(proxyTable).forEach(function(context){
varoptions=proxyTable[context]
if(typeofoptions==='string'){
options={target:options}
}
app.use(proxyMiddleware(options.filter||context,options))
})
app.use(nuxt.render)//这里是添加nuxt渲染层服务的中间件
app.listen(3000)
console.log('Serverislisteningonhttp://localhost:3000')
然后在nuxt.config.js中添加如下代码
module.exports={
dev:{
proxyTable:{
'/api':
{
target:'http://localhost:7001',//
pathRewrite:{'^/api':'/'}
}
}
}
}
然后nodeserver.js运行就可以了。
觉得运行不方便还可以把命令添加到package.json文件里。
{
"scripts":{
"dev":"nuxt--port=8080",
"build":"nuxtbuild",
"start":"nuxtstart",
"generate":"nuxtgenerate",
"lint":"eslint--ext.js,.vue--ignore-path.gitignore.",
"precommit":"npmrunlint",
"server":"nodeserver.js"
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。