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
此時數據已經打印在控制台中
注意這里面 /api是你自定義的，寫成什么都可以。target 設置你調用的接口域名和端口號。這里理解成用‘^/api’代替target里面的地址，后面組件中我們調接口時直接用api代替 。比如我要調用’http://localhost:3000/url‘，直接寫‘/api/url’即可。
在main.js 設置 Vue.prototype.$axios = axios; 將axios寫入Vue原型中，在全局的組件中就可以使用this.$axios.xxx的形式調用。
在main.js設置一個基礎路徑，這樣你調用接口的時候可以不寫api,直接寫接口名稱即可。axios.defaults.baseURL=”/api”。
配置完成，比如發送GET請求：this.$axios.get(‘/url’)，簡潔明了。