nodeJS（express4.x）+vue（vue-cli）构建前后端分离实例(带跨域)

下面详细讲解如何使用nodeJS（express4.x）+vue（vue-cli）构建前后端分离实例，并实现跨域请求。步骤如下：

1.创建后端项目

1.1 创建项目文件夹，并在终端中进入该文件夹，执行以下命令初始化项目：

npm init

1.2 安装express框架：

npm install express --save

1.3 在项目根目录中创建app.js文件，并编写以下代码：

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

app.use(express.json());
app.use(express.urlencoded({ extended: true }));

app.use(function(req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  next();
});

app.get('/api/test', function(req, res) {
  res.json({ message: 'Hello, world!' });
});

const port = process.env.PORT || 3000;
app.listen(port, function() {
  console.log(`Server listening on port ${port}`);
});

1.4 执行以下命令运行项目：

node app.js

1.5 访问 http://localhost:3000/api/test 确认后台服务是否正常运行。

2.创建前端项目

2.1 安装vue-cli：

npm install -g vue-cli

2.2 创建项目：

vue init webpack my-project

其中my-project为项目名称，根据自己需求更改。

2.3 进入项目目录，安装依赖：

cd my-project && npm install

2.4 在/src目录下创建env.js文件，编写以下代码：

const env = {
  API_HOST: 'http://localhost:3000'
};

export default env;

2.5 在/config/index.js中修改以下配置：

module.exports = {
  // ...
  dev: {
    // ...
    proxyTable: {
      '/api': {
        target: env.API_HOST,
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/api'
        }
      }
    }
  },
  // ...
}

2.6 在/src/components/HelloWorld.vue文件中，编写以下代码：

<template>
  <div class="hello">
    <button @click="fetchMessage">Fetch message</button>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import axios from 'axios';
import env from '../env';

export default {
  data () {
    return {
      message: null
    }
  },
  methods: {
    fetchMessage() {
      axios.get('/api/test').then(response => {
        this.message = response.data.message;
      });
    }
  }
}
</script>

2.7 执行以下命令运行项目：