Vue配置反向代理（附带测试代码）

Vue配置反向代理（附带测试代码）

后台准备

本人是java 所以用springboot 写了简单后台，打包后发布到自己阿里云服务器上面

前端配置

安装node.js

自行百度

配置vue环境

1. 查看node是否安装成功
   npm -v
   
2. 切换npm源为淘宝源
   1. 查看是那个源：
      npm config get registry
      
   2. 已经是淘宝则不需要切换，切换淘宝源
      npm config set registry https://registry.npm.taobao.org
3. 安装vue-cli
   npm install vue-cli -g

新建vue脚手架项目

1. 查询有那些脚手架项目
   vue list
   

   2. 查看有那些vue指令
      vue --help
      
      tip:vue build 是vue3的创建指令
   3. 创建模板
      vue init webpack test

cd ./test
npm install

npm run dev
      

   准备发起请求

   1. 安装请求工具包
      `npm install axios -S’

      

2. 修改HelloWorld.vue

   <script>
   import axios from 'axios'
   
   export default {
     name: 'HelloWorld',
     data () {
       return {
         msg: 'Welcome to Your Vue.js App'
       }
     },
     created () {
       console.log('created')
       axios.defaults.headers.common['token'] = 'token'
       axios.get('api/test/test').then(res => {
         console.log('res', res)
       }).catch(err => {
         console.log('err:', err)
       })
     }
   }
   </script>
   

3. 修改config/index.js

       proxyTable: {
         '/api': {  //使用"/api"来代替"http://161.117.*.247:9888"
           target: 'http://161.117.*.247:9888', //源地址
           changeOrigin: true, //改变源
           pathRewrite: {
             '^/api': '/' //路径重写
           }
         }
       }
   

注意： http://161.117.*.247 是我的阿里云服务地址，你自己服务器跑在那台上面，就写你自己后台服务器地址

启动项目

1. npm run dev

2. 访问:localhost:8080
   

   

3. 后台查询是否访问成功
   

项目源码地址

码云地址：码云