Vue第三部分(2)：Vue-CLI构建前后端分离项目以及打包部署

通过上一节，我们学习了vue脚手架的相关概念以及构建过程，那么开始我们的前后端项目吧

Vue-CLI构建前后端分离项目

1.项目环境初始化

1.安装 axios vue-axios（记得执行命令要进入项目里面执行哦，否则就会报错）

E:\ideaProject\vue-cli-test>npm install --save axios vue-axios 

2.main.js中引入相关库  

import axios from 'axios'
import VueAxios from 'vue-axios'

//配置后端服务地址
axios.defaults.baseURL="http://localhost:8080"
//在Vue中配置axios，在所有的Vue组件中就可以通过this.axios使用axios库
Vue.use(VueAxios,axios)

2.分页查询和删除

1.components下新建 BookTable.vue

注意：axios要通过this.axios的方式调用

3.在app.vue中添加如下代码

    
    
    
    

    
hello 
    

      查询
    
    
    
    
  

3.解决跨域问题

出于浏览器的同源策略限制，同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）。前后端分离的模式下，前端页面的js代码和服务端的服务地址不在同一个域下，无法直接通信。

解决方案：

1. main.js添加如下配置

import axios from 'axios'
import VueAxios from "vue-axios"

axios.defaults.baseURL="http://localhost:8080"
//添加的配置
axios.defaults.withCredentials = true

Vue.use(VueAxios,axios)

2.服务端添加响应头

//设置允许跨域共享资源的前端地址
resp.setHeader("Access-Control-Allow-Origin","http://localhost:8081");
//允许client跨域请求时携带cookie
resp.setHeader("Access-Control-Allow-Credentials","true");

4.打包部署

当我们使用vue-cli脚手架完成一个项目后，下一步就需要打包部署项目（类似于JavaWeb项目开发后要打war包部署到tomcat中）。

1. 执行打包命令

#在项目目录下执行npm run build
E:\ideaProject\vue-cli-test>npm run build

#最后出现如下信息，表示打包完成
Build complete.

  Tip: built files are meant to be served over an HTTP server.
  Opening index.html over file:// won't work.

2.打包后的文件，保存在项目目录下新生成的dist目录下  

 

 3.修改index.html中静态资源路径

 4.将dist文件夹部署到服务器上并运行