背景
在本地开发vue项目的时候,当你习惯了proxyTable解决本地跨域的问题,切换到nuxt的时候,你会发现,添加了proxyTable设置并没有什么作用,那是因为你是用的vue脚手架生成的vue项目,它里面已经帮你写好了相关的proxyTable的设置代码。
build/dev-server.js
// proxy api requests
.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
.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文件里。
{
\" s\": {
\"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\"
}
}
继续阅读与本文标签相同的文章
上一篇 :
FaceU产品创始人郭列已转为字节跳动顾问
-
阿里云服务器搭建一个网站网站建设的基本步骤——部署与发布新手入门
2026-05-18栏目: 教程
-
网络基础技术实践#网络安全基础技术实践课程
2026-05-18栏目: 教程
-
阿里云服务器计算网络增强型实例sn1ne 适合中大型网站及性能要求高的公司业务使用
2026-05-18栏目: 教程
-
前端进阶|第八天 京东笔试题,引用传参赋值无效?
2026-05-18栏目: 教程
-
阿里云弹性伸缩ESS必知必会
2026-05-18栏目: 教程
