背景在本地开发vue项目的时候，当你习惯了proxytable解决本地跨域的问题，切换到nuxt的时候，你会发现，添加了proxytable设置并没有什么作用，那是因为你是用的vue脚手架生成的vue项目，它里面已经帮你写好了相关的proxytable的设置代码。
build/dev-server.js// proxy api requestsobject.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.jsconst { 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 })// 生产模式不需要 buildif (!isprod) { const builder = new builder(nuxt) builder.build()}// proxy api requests这里就是添加的proxytable中间价的设置了var proxytable = config.dev.proxytableobject.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" }}
相关推荐：
如何在网站中添加视频
如何在http请求头中添加cookie
以上就是如何在nuxt中添加proxytable代理？的详细内容。