一、环境

windows 10
vue-cli 3.11.0

二、创建项目

$ vue create [项目名称]

三、设置代理方式处理跨域

注意:因为vue-cli2.x 与 vue-cli3.x 差别很多,在版本3中精简了很多文件,其中就有vue.config.js文件

1.添加配置文件

在package.json文件的同级目录下创建vue.config.js文件,文件的格式应该为:

// vue.config.js
module.exports = {
  // 选项...
}

2.基础配置:

module.exports = {
    outputDir: 'dist',   //build输出目录
    assetsDir: 'assets', //静态资源目录（js, css, img）
    lintOnSave: false, //是否开启eslint
    devServer: {
        open: true, //是否自动弹出浏览器页面
        host: "localhost", 
        port: '8080', 
        https: false,   //是否使用https协议
        hotOnly: false, //是否开启热更新
        proxy: null,
    }
}

官网给出了丰富而全面的配置，更多配置请参考官方配置文档

3.设置代理(开发环境下)

我们在前后端分离开发时,不得不面对跨域问题,对于跨域,可以用两种办法进行处理.

• 安装nginx，将后端和前端都代理带nginx上。
• 在vue.config.js文件中配置proxy属性,将API请求代理到API服务器上,设置devServer.proxy

  devServer: {
      open: true, //是否自动弹出浏览器页面
      host: "localhost", 
      port: '8080',
      https: false,
      hotOnly: false, 
      proxy: {
          '/api': {
              target: 'http://www.vueadmin.io', //API服务器的地址
              ws: true,  //代理websockets
              changeOrigin: true, // 虚拟的站点需要更管origin
              pathRewrite: {   //重写路径 比如'/api/aaa/ccc'重写为'/aaa/ccc'
                  '^/api': ''
              }
          }
      },
  }
  //若是原后端API接口地址为 http://www.vueadmin.io/index.php/admin/Index/index,则此时设置API代理后,访问API接口应该写为:/api/index.php/admin/Index/index,只有在添加'/api'后才会被proxy代理到.  

四、服务端设置响应头处理跨域(部署环境下)

设置代理的处理跨域方式只限于在本地开发环境下处理跨域问题,若打包部署线上环境需要在服务端处理

• 服务端:ThinkPHP5
• 在其入口文件处添加以下内容:

  // 准许跨域请求。
  header("Access-Control-Allow-Origin: * ");
  header("Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE");
  /**
  * 浏览器第一次在处理复杂请求的时候会先发起OPTIONS请求。路由在处理请求的时候会导致PUT请求失败。
  * 在检测到option请求的时候就停止继续执行
  */
  if($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
  header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization");
  exit;
  }

  原文链接

五、vue-resource发送跨域请求

我们习惯在jQuery 中使用Ajax的Jsonp发送跨域请求,但是vue本身不支持发送Ajax请求，需要使用vue-resource、axios等插件实现。axios是一个基于Promise的HTTP请求客户端，用来发送请求，也是vue2.0官方推荐的，同时不再对vue-resource进行更新和维护，但是axios本身并不支持发送跨域的请求，没有提供相应的API，作者也暂没计划在axios添加支持发送跨域请求，所以我们只能选择使用vue-resource发送跨域请求。

• 安装vue-resource：npm install vue-resource --save
• 基本用法：

  //在main.js中引入 "vue-resource"
  import VueHttp from "vue-resource";
  //注册,以便在全局使用
  Vue.use(VueHttp);
  //在组件中使用
  this.$http.jsonp(url,[ops]).then((response)=>{
  //请求成功处理业务逻辑
  })
  //注意:jsonp跨域请求只能使用GET方式

• 基本例子演示：

  // 客户端
  <script>
  var vm = new Vue({
      el:"#app",
      methods:{
          sendJsonp:function(){
              this.$http.jsonp('https://xxxxxxxxxx',
              {
                  params:{
                      id:"123456",
                      t:1,
                  },
                  jsonp:'callback' //设置jsonp回调的函数名
              }).then(function(res){
                      console.log(res.data);
              });
          }
      }
  });
  </script>
  //服务端(PHP)
  <?php
  $id = $_GET['id'];
  $t = $_GET['t'];
  $jsonp = $_GET['callback'];//get接收jsonp自动生成的函数名
  $id = $id+1000;
  $t = $t +3;
  $arr = array(
  'id' => $id,
  't' => $t
  );
  echo $jsonp.'('. json_encode($arr). ')'; //jsonp函数名包裹json数据

  学习原文① | 学习原文②

本作品采用《CC 协议》，转载必须注明作者和本文链接