Maison > Article > interface Web > Comment ajouter un proxy proxyTable dans Nuxt ?
Lors du développement de projets Vue localement, lorsque vous êtes habitué à proxyTable
résoudre des problèmes inter-domaines locaux et à passer à nuxt
, vous constaterez que les paramètres proxyTable
sont ajoutés. Cela ne fonctionne pas. C'est parce que vous avez utilisé l'échafaudage vue pour générer le projet vue, qui a déjà écrit le code de paramètre proxyTable
approprié pour vous.
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)) })
Cela se présente sous forme de middleware express, et la dépendance utilisée est http-proxy-middleware
nuxt a aussi la notion de middleware, mais ce middleware n'est pas le middleware d'Express , alors comment l'ajouter à nuxt ?
Tout d'abord, installez les dépendances
npm install --save-dev express http-proxy-middleware
Créez ensuite un fichier dans le répertoire racineserver.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')
Ensuite, ajoutez le code suivant nuxt.config.js
module.exports = { dev: { proxyTable: { '/api': { target: 'http://localhost:7001', // pathRewrite: { '^/api': '/' } } } } }dans
puis node server.js
exécutez-le.
Si vous trouvez cela peu pratique à exécuter, vous pouvez ajouter la commande au fichier 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" } }
Recommandations associées :
Comment ajouter des vidéos au site Web
Comment ajouter des cookies au http en-tête de la demande
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!