当前位置：首页 > VUE

node vue实现

2026-01-13 23:45:05VUE

使用Node.js和Vue.js实现前后端分离应用

后端（Node.js）搭建 Express框架是Node.js中常用的后端框架，安装Express并创建基础服务器：

npm install express cors

创建server.js文件：

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

app.use(cors());
app.use(express.json());

app.get('/api/data', (req, res) => {
  res.json({ message: "Data from Node.js backend" });
});

const PORT = 3000;
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

前端（Vue.js）搭建 使用Vue CLI快速初始化项目：

npm install -g @vue/cli
vue create vue-frontend
cd vue-frontend
npm install axios

修改src/App.vue调用后端API：

<template>
  <div>
    <p>{{ backendData.message }}</p>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      backendData: {}
    };
  },
  created() {
    axios.get('http://localhost:3000/api/data')
      .then(response => {
        this.backendData = response.data;
      });
  }
};
</script>

项目联调与跨域处理

后端需配置CORS中间件允许前端访问：

node vue实现

app.use(cors({
  origin: 'http://localhost:8080' // Vue默认开发端口
}));

前端开发服务器代理配置（vue.config.js）：

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

生产环境部署

构建Vue前端静态文件：

npm run build

配置Express托管静态文件：

node vue实现

const path = require('path');
app.use(express.static(path.join(__dirname, 'vue-frontend/dist')));

添加通配路由处理SPA：

app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'vue-frontend/dist', 'index.html'));
});

数据库集成示例（MongoDB）

安装mongoose连接数据库：

npm install mongoose

数据库连接与模型定义：

const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost:27017/mydb');

const Item = mongoose.model('Item', {
  name: String,
  value: Number
});

app.post('/api/items', async (req, res) => {
  const newItem = new Item(req.body);
  await newItem.save();
  res.status(201).send(newItem);
});