前言：跨域請求是在本地開發時經常遇到的需求，也很簡單，只是幾句代碼配置一下的問題。我初次配置跨域請求時由于官方的說明太簡潔，找到的教程又落伍，調試了一番并沒有解決問題，到最后解決問題，已花費了很多時間精力。所以再搭個項目從頭走一遍，不敢說是教程，僅作記錄。

說明：本文項目基于 Vue CLI?^4.3.0，Node.js v12.13.0. 和?express ~4.16.1?構建，未安裝的話則需要先安裝，后文不再說明。

1.在桌面運行 cmd，使用命令 vue create demo 創建一個 vue 項目 demo,插件依賴等使用默認配置：

2.項目創建成功之后，使用命令 cd demo，進入 demo 文件夾，然后使用命令 npm run serve 啟動項目，端口默認8080：

3.在瀏覽器中訪問?http://localhost:8080/?，可以看到本地運行的 Vue 項目：

4.在 demo 文件夾中運行 cmd，使用命令 express --view=ejs server 創建 node.js 項目 server：

5.創建完成之后，按照提示，使用命令 cd server 進入 server 文件夾，使用命令 npm install 安裝所需依賴，使用 npm start 啟動項目，默認端口3000：

6.在瀏覽器訪問?http://localhost:3000/，可以看到本地運行的 Node.js 服務器項目：

7.用編輯器打開Vue項目demo，打開 server 文件夾下 routes 文件夾下的 index.js 文件，添加一個路由，返回結果為一個json對象：

8.在終端中重啟 Node.js 項目 server，然后在瀏覽器中訪問?http://localhost:3000/person，可以看到請求成功后的返回結果

9.使用命令 npm install axios 為Vue項目安裝用來做異步請求的 axios，然后在 main.js 中引入并綁定到Vue的原型上：

10.在Vue項目的 App.vue 文件中添加生命周期 mounted 的鉤子函數，用 axios 發起 get 請求，請求接口為 api/person。此時如果重啟Vue項目，在控制臺中能看到請求結果404 (Not Found)

11.在Vue項目根目錄下新建 vue.config.js，內容如下:

1 module.exports ={2 devServer: {3 proxy: {4 '/api': {5 target: 'http://localhost:3000', //node.js服務器運行的地址

6 ws: true,7 changeOrigin: true,8 pathRewrite: {9 '^/api': 'http://localhost:3000' //路徑重寫

10 }11 },12 }13 }14 }

12.重啟Vue項目，打開控制臺，可以看到請求到的數據：

總結

以上是生活随笔為你收集整理的node服务器放vue项目,本地Vue项目跨域请求本地Node.js服务器的配置方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。