前后端联调

前后端联调
访问服务器的数据
config-index.js-proxyTable-api-target(修改服务器名称，IP地址)
ifconfig:查看IP地址
192.168.3.14

"dev": "webpack-dev-server --host 0.0.0.0 --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
修改后可通过IP地址访问

http://192.168.3.14:8080/#/
可以在手机上进行测试




问题：在手机上测试时，滑动字母表，页面跟着上下拖动----解决：将touchstart添加修饰符prevent
机型不同，访问页面白屏---原因：手机浏览器不支持promise-----解决：安装第三方包babel-polyfill --save，在main。js中引入引入babel-polyfill
还有一部分出现时webpack dev server问题，当上线到开发环境时，白屏问题可能就不会出现了

上线：
命令行运行 npm run build
显示build complete
生成一个dist目录，是上线的代码，将dist目录里面的内容给后端的人员，将其放到服务器上根路径上，只需要浏览器上打开localhost就可以了

如果想在后端根目录建一个文件放置打包的文件如project，想在浏览器上用localhost/project进行访问，需要修改config配置，index.js文件中
build→assetsPublicPath：“/project"重新进行打包 npm run build，重新生成dist目录，将dist名字改为project，扔到后端的根目录下

打包后的文件中
css 所有页面要用到的css文件
css.map 方便开发调试时候用

js文件
manifest.js打包生成的配置文件
vendor.js各页面及组件公用的代码
app.js各个页面的所有逻辑代码

只有考虑打包后的app。j’s文件特别大时候，才进行异步加载，不然不用，不然代价大
异步组件实现按需加载，改成函数形式
export default new Router({
routes: [{
path: ‘/’,
name: ‘Home’,
component: () => import(’@/pages/Home/home’)
},{
path: “/city”,
name: ‘City’,
component: () => import(’@/pages/City/city’)
},{
path: “/detail/:id”,
name: ‘Detail’,
component: () => import(’@/pages/Detail/detail’)
}],

components: {
HomeHeader: () => import("./components/Header.vue")