背景
在本地开发vue项目的时候,当你习惯了proxyTable解决本地跨域的问题,切换到nuxt的时候,你会发现,添加了proxyTable设置并没有什么作用,那是因为你是用的vue脚手架生成的vue项目,它里面已经帮你写好了相关的proxyTable的设置代码。
build/dev-server.js
这里是采用的express中间件的形式,使用的依赖是http-proxy-middleware
nuxt也有中间件的概念,不过这个中间件不是express的中间件,那么我们怎么添加到nuxt里面去呢?
怎么做
首先,安装依赖
然后在根目录创建一个文件server.js
// 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渲染层服务的中间件
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')
然后node server.js运行就可以了。
觉得运行不方便还可以把命令添加到package.json文件里。