10——去哪儿网（线上部署）

10.1vue项目中的接口联调：
congig/index.js 里proxyTable里的api
原前端

 proxyTable: {
      '/api':{
        target :'http://localhost:8080',
        pathRewrite:{
          '^/api': '/static/mock'
        }
      }
    },

修改后

 proxyTable: {//配置项
      '/api':{
        target :'http://localhost:80'  //eg php后台端口，或者内网IP地址或者外网域名
      }
    },

10.2Vue项目的真机测试：

windows打开命令行工具，输入ipconfig，os则输入ifconfig。来获取ipv4地址
webpack-dev-server 默认不支持通过ip启动项目.
若想修改，则打开package.json,找到scripts里的dev
原："dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
改为"dev": "webpack-dev-server --host 0.0.0.0 --inline --progress --config build/webpack.dev.conf.js",
再重启服务器。
只要手机再同一片局域网上，手机也可通过ip：8080访问
然后发现一个bug，手指滑动页面向下拉的时候页面会跟着滑动，此时在代码里添加.prevent即可阻止默认行为

@touchstart.prevent="handleTouchStart"

有些低版本安卓手机会打不开，出现白屏情况，因为不支持promise
此时需要安装一个第三方包（bable-polyfill）

npm install bable-polyfill --save

在main.js上引用 import 'bable-polyfill'

10.3如何把vue项目打包上线?
生成一个可被浏览器运行的代码，也是一个压缩后的代码,输入npm run build

此时文件夹会多出一个dist文件夹，再把dist里的文件夹放在后台服务器的根路径下即可，再访问localhost即可。
如果不想放在根目录下，可修改前端文件的config/index.js 里的build

修改这里就好了，这样的话，访问地址也要做相应的修改

10.4 异步组件的按需加载
打包出来的js有3个:

app.js     ---------   所有页面的业务逻辑
vendor.js   ---------   各个组件公用的代码
manifest.js   ---------   项目各个组件的业务逻辑

我们需要优化的是app.js，因为它放的是所有页面的业务逻辑，比如说当我们访问首页的时候，不要其他页面诸如列表页的业务逻辑，但是app.js却将所有的包裹进来了。
当项目越来越大的时候，app.js也越来越大，可能会上M，所以就需要我们用异步组件对其进行优化。

• 什么是异步组件？

所以一次性将所有的代码都加载好了，再去其他的页面，不会再发起别的js请求了。
而我们想要做的是，现在在首页，就只加载首页的业务逻辑
去列表再加载列表的代码，这就是异步加载，需要什么加载什么。
去router/index.js里修改

之前的模式是直接将所有组件import进来，然后配置路由，写上它们的组件名称

现在修改成这样：(compontents直接修改成一个箭头函数引入组件的形式，最顶部的直接引入去掉了)

• 优缺点：

只需要加载首页对应的业务逻辑就行了，不会加载其他的业务逻辑。
但是访问下一个页面时，会额外发起一个http的请求
当我们的app.js非常小的时候，不需要做这个拆分