Vue——前端框架，Node——JavaScript运行时环境，可以运行在服务器上，在小项目中node完全可以作为自己的服务器使用，目前学习node是为了完成毕业设计。
但是两者怎么联系在一起？因为两者本身存在跨域问题。以下简例解决问题。
首先先创建一个Vue项目Client，这里使用脚手架创建
主要代码如下
1 /**main.js*/ 2 import Vue from ‘vue‘ 3 import App from ‘./App‘ 4 import axios from ‘axios‘ 5 Vue.prototype.$axios = axios; 6 7 axios.defaults.baseURL = ‘/api‘; 8 9 Vue.config.productionTip = false; 10 11 /* eslint-disable no-new */ 12 new Vue({ 13 el: ‘#app‘, 14 components: { App }, 15 template: ‘<App/>‘ 16 });
1 /**App.vue*/ 2 <template> 3 <div> 4 2222 5 </div> 6 </template> 7 8 <script> 9 export default { 10 name: ‘App‘, 11 mounted(){ 12 this.$axios({ 13 method:‘get‘, 14 url:‘/‘ 15 }).then(res => { 16 console.log( res ) 17 }) 18 }, 19 components: { 20 } 21 } 22 </script> 23 24 <style> 25 </style>
接着创建一个服务器Server
1 /**app.js*/ 2 3 const express = require(‘express‘); 4 5 const app = express(); 6 7 app.get(‘/‘,function (req,res) { 8 res.send(‘hello express vue‘) 9 }); 10 11 app.listen(3000,function () { 12 console.log(‘server is running‘) 13 });
解决跨域问题，在Vue项目中，找的项目文件夹config/index.js
在proxyTable: {}中插入如下代码：
1 proxyTable: { 2 ‘/api‘: { // 匹配所有以 ‘/api‘开头的请求路径 3 target: ‘http://localhost:3000‘, // 代理目标的基础路径 4 changeOrigin: true, // 支持跨域 5 pathRewrite: {// 重写路径: 去掉路径中开头的‘/api‘ 6 ‘^/api‘: ‘‘ 7 } 8 } 9 }
此外，在main.js中，添加一行 代码axios.defaults.baseURL = ‘/api‘; ；
启动服务器， node app.js
启动前端项目， npm run dev
此时数据已经打印在控制台中
原文：https://www.cnblogs.com/zhaohui-116/p/12128884.html