本章节对应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 打包项目,并将项目放到后端服务器的根目录下。