Vue设置代理

Vue设置代理

设置代理就是跨域

前提步骤

搭建前端框架

vue create study

搭建后端
1.全局命令：npm install express-generator -g
2.进入项目目录：express --view=ejs server
根据终端提示的信息：
cd server
npm install
npm run start

总之，代理解决开发时候的一个跨域问题，由前端进行解决，这里不需要在用jsonp了

后端建立一个接口，用来测试跨域
在router/index.js里面添加内容

router.get('/list', function(req, res, next) {
  res.json({
    a: 1
  })
});

在前端项目中，在根目录建立vue.config.js文件用来进行跨域的操作

module.exports = {
    devServer: {
        proxy: 'http://localhost:3000'
    }
}

然后下载npm install axios -S
在使用接口数据时，要对axios进行第二次封装
1.在src目录创建一个api文件里面在新建一个http.js文件。文件路径如下：src/api/http.js

import axios from "axios";
// 第二次封装
export default{
    $axios(options) {
        return axios({
            url: options.url
        })
    }
}

2.在去App.vue文件进行引入

import http from './api/http'
  export default {
    created() {
      http.$axios({
        url: '/list'
      }).then(res => {
        console.log(res);
      })
    }
  }

此时前端页面可以得到后端的数据

打包项目

使用命令npm run bulid打包项目
打包成功会在根目录形成一个dist文件里面压缩好的js,html,css等文件，打开里面目录的index.html文件，发现网页是空白的。

原因如下：

1.路径问题‘
2.路由模式

解决方案

1.在src/router/index.js文件中，将mode改为hash
2.在vue.config.js文件中添加打包路径

module.exports = {
    publicPath: './',
    devServer: {
        proxy: 'http://localhost:3000'
    }
}

然后，再重新打包项目(npm run build),在dist文件夹中打开index.html文件

如果，项目要求是要history模式，可以先改为hash模式，测试结果是正常的就可以改为history模式，打包成功后交给后端开发人员就乐意，同时也要提醒后端开发员注意路径问题，要重定向

但是此时打包成功了，前端页面能够正常显示，但是后端的数据是不能使用的

环境变量

开发环境：.env.development
生产环境：.env.production

新建环境文件

在跟根目录下新建[.env.development]和[env.production]文件
在.env.development文件中编写

VUE_APP_TITLE = 'Alan'
VUE_APP_ENV = 'dev'

VUE_APP_BASE_API = 'http://localhost:3000'

在.env.production文件中编写

VUE_APP_TITLE = 'Alan'
VUE_APP_ENV = 'pro'

VUE_APP_BASE_API = 'http://localhost:3000'

在去src/api/http.js文件里面判断环境变量

import axios from "axios";
// 第二次封装
export default{
    $axios(options) {
        let apiUrl = null;
        if(process.env.VUE_APP_ENV === 'dev') {
            apiUrl = options.url
        } else {
            apiUrl = process.env.VUE_APP_BASE_API + options.url
        }
        return axios({
            url: apiUrl
        })
    }
}

后端跨域

在router/index.js文件中操纵

router.all('*', function(req,res,next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  res.header('Access-Control-Allow-Methods', '*');
  res.header('Content-Type', 'application/json;charset=utf-8');
  next();
})

再次进行npm run build进行项目打包

此时能够正常显示