本地Vue项目请求本地Node.js服务器如何配置

在开发过程中，我们经常需要将前端Vue项目与后端Node.js服务器进行联调。本文将详细介绍如何在本地环境中配置Vue项目与Node.js服务器之间的请求。

1. 环境准备

首先，确保你已经安装了以下工具：

• Node.js
• Vue CLI
• 一个代码编辑器（如VSCode）

2. 创建Vue项目

使用Vue CLI创建一个新的Vue项目：

vue create my-vue-app

按照提示选择你需要的配置，完成后进入项目目录：

cd my-vue-app

3. 创建Node.js服务器

在项目根目录下创建一个新的文件夹server，并在其中初始化一个Node.js项目：

mkdir server
cd server
npm init -y

安装Express框架：

npm install express

在server目录下创建一个index.js文件，编写一个简单的Express服务器：

const express = require('express');
const app = express();
const port = 3000;

app.get('/api/data', (req, res) => {
  res.json({ message: 'Hello from Node.js server!' });
});

app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

启动服务器：

node index.js

此时，Node.js服务器已经在http://localhost:3000上运行。

4. 配置Vue项目请求Node.js服务器

在Vue项目中，通常使用axios来发送HTTP请求。首先安装axios：

npm install axios

在src/main.js中引入axios并配置全局默认请求地址：

import Vue from 'vue';
import App from './App.vue';
import axios from 'axios';

Vue.config.productionTip = false;

axios.defaults.baseURL = 'http://localhost:3000';

new Vue({
  render: h => h(App),
}).$mount('#app');

在src/components/HelloWorld.vue中发送请求：

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      message: '',
    };
  },
  created() {
    axios.get('/api/data')
      .then(response => {
        this.message = response.data.message;
      })
      .catch(error => {
        console.error('Error fetching data:', error);
      });
  },
};
</script>

5. 解决跨域问题

在开发过程中，Vue项目运行在http://localhost:8080，而Node.js服务器运行在http://localhost:3000，这会导致跨域问题。可以通过以下两种方式解决：

5.1 使用Vue CLI的代理配置

在vue.config.js中配置代理：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
      },
    },
  },
};

5.2 在Node.js服务器中启用CORS

在server/index.js中启用CORS：

const express = require('express');
const cors = require('cors');
const app = express();
const port = 3000;

app.use(cors());

app.get('/api/data', (req, res) => {
  res.json({ message: 'Hello from Node.js server!' });
});

app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

安装cors包：

npm install cors

6. 运行项目

启动Vue项目：

npm run serve

此时，Vue项目将在http://localhost:8080上运行，并且可以成功请求Node.js服务器的数据。

7. 总结

通过以上步骤，我们成功配置了本地Vue项目与本地Node.js服务器之间的请求。无论是通过代理还是CORS，都可以解决跨域问题，确保前后端联调的顺利进行。希望本文对你有所帮助！