【问题标题】:Vue: Proxy requests to a separate backend server with vue-cliVue:使用 vue-cli 将请求代理到单独的后端服务器
【发布时间】:2018-10-04 21:34:07
【问题描述】:

我正在使用 vue-cli webpack 模板来生成我的项目,并且我想将请求代理到一个单独的后端服务器。但我收到如下错误消息。

谁能告诉我我的编码有什么问题?

非常感谢!

错误信息

[HPM] Error occurred while trying to proxy request from localhost:8080 to http://localhost:3000 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)

配置-> index.js

proxyTable: {
'/api':{
    target: 'http://localhost:3000',
    changeOrigin: true,
    pathRewrite: {
    '^/api': ''
    }
 }

src -> main.js

import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import routerConfig from './router.config.js' 
import Axios from 'axios'


Vue.config.productionTip = false;
Vue.prototype.$axios = Axios;
Vue.prototype.HOST = '/api';

Vue.use(VueRouter);

const router = new VueRouter(routerConfig) 

new Vue({
 el: '#app',
 router,  
 components: { App }, 
 template: '<App/>',
})

src -> App.vue

export default{

created(){
  var url = this.HOST
  this.$axios.get(url,{

  }).then((res)=>{

   console.log(res.data)

  },(res)=>{

  alert(res.status)
  })
 }
}

服务器

const express = require('express');
const mysql = require('mysql');

const db = mysql.createPool({
  localhost:'localhost',
  user:'root',
  password:'123456',
  database:'blog'
})

const server = express();

server.use('/api',(req,res)=>{

db.query(`SELECT * FROM articles_table`,(err,data)=>{
   if(err){
     console.error(err);
     res.status(500).send('database error').end();
   }else{
     res.send(data)
   }
 })

})
server.listen(3000)

【问题讨论】:

  • 可能看起来太明显了,但是......当您遇到该错误时,您的快速服务器是否正在运行?
  • 对不起,您能告诉我在出现错误时如何运行快速服务器吗?前端和后端有不同的端口@acdcjunior
  • 说你发布的那个文件的内容(const express = require('express'); ... server.listen(3000))在server.js。你必须像node server.js 一样运行它(前提是你之前运行npm install 来下载expressmysql 依赖项)
  • 你的意思是我需要先运行'node server.js'吗?但是如果我运行“node server.js”,那么我无法运行“npm run dev”...我该如何解决这个问题?@acdcjunior

标签: node.js express vue.js vue-cli


【解决方案1】:

如下操作:

npm install --save-dev concurrently

在 package.json 中添加到 scripts

"server": "node server.js",
"go": "concurrently --kill-others \"npm run dev\" \"npm run server\""

从现在开始使用:

npm run go

当然,您可以将go 重命名为您想要的任何名称。

【讨论】:

  • 你能再试一次吗?我已经换了包。
  • 好,我这里用cli创建一个项目,我测试一下告诉你,好吗?同时,我的建议是你打开两个shell。在一个中运行node server.js,在另一个中运行npm run dev,就像往常一样。
  • 啊,太好了,我没看到评论。很高兴它成功了!
猜你喜欢
  • 2017-03-11
  • 1970-01-01
  • 2018-09-26
  • 2018-12-13
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-12-15
  • 2020-11-25
相关资源
最近更新 更多