如何进行vue接口联调、真机调试以及打包上线——如何通过ip来访问前端项目，如何解决手机真机调试白屏问题一

本章节对应10-1

1、vue项目如何进行接口联调

在之前我们用ajax请求的数据，都是用本地的mock模仿，所以需要进行接口联调。联调过程：
1.打开config目录中的index.js。将proxyTable中的target更改为真正要访问的端口。加入我们真正要访问的端口是localhost：80`

//`更改前：
    proxyTable: {
      '/api': {
        target: 'http://localhost:8080',
        pathRewrite: {
          '^/api': '/static/mock'
        }
      }
    },

//更改后：
    proxyTable: {
      '/api': {
        target: 'http://localhost:80',
      }
    },

2.如何用ip地址的形式放我vue项目

更改配置文件要重启服务器。如果要访问的网址在一个另外一个车网络环境中，可以将localhost替换成那个网络ip地址。
注：webpack.dev.server默认不支持ip地址访问。需要修改默认配置，在package.json中更改dev的配置，添加–host 0.0.0.0

  "dev": "webpack-dev-server --host 0.0.0.0 --inline --progress --config build/webpack.dev.conf.js",

设置以后，就可以用ip地址来代替localhost，我们也能利用手机端进行真机调试。

3.如何处理vue项目真机调试白屏问题(只限于安卓手机)。

方法一：在项目中引入babe-polyfill
1.首先安装babel-polifill

npm install babel-polyfill --save

2.在项目的入口文件中引入，我的入口文件是main.js

//main.js
import 'babel-polyfill'

注：解决白屏问题的方法2，我们在下面会介绍到。

3.如何将项目打包上线

1.在命令行进入到该目录，输入

cnpm run build

vue的脚手架工具会自动对我们的src目录进行打包，生成浏览器能够运行·的代码。
2.该命令运行完成之后，在我们的项目中会生成一个dist目录，这个目录就是我们最终需要上线的代码。
3，单独提取出dist目录，将dist交给编写后端的人员，后端人员会将这个放入后台服务器的根路径下。这时我们在浏览器只需要输入后台的服务器地址就可以了。
4.如果dist目录没有直接存放在根目录下，而是在根目录下新建了一个文件夹存放，比如，project目录，需要进行如下设置。
1）打开开发目录的config文件，打开index.js，找到build的属性部分。修改assetPublicPath的属性值。将“/”修改为“/project”

//修改前
 assetsPublicPath: '/',

//修改后
 assetsPublicPath: '/project',

更改完毕，重新使用npm run build 打包项目，并将项目放到后端服务器的根目录下。