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