Vue实战项目开发 - 项目的联调，测试与发布上线

￡神魔★判官ぃ 2022-04-05 14:47 114阅读 0赞

### Vue项目的接口联调 ###

修改config/index下的配置项就可以实现接口联调

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70][]

### Vue项目的真机测试 ###

直接使用本机的ip进行访问不行，因为vue项目是通过webpack来实现在浏览器预览的，同时webpack-dev-server默认不支持ip访问，所以需要修改package.json配置文件，增加红框中的配置

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 1][]

再查看你的电脑ip地址：就可以在手机上根据IP地址来进行真机测试了

可以出现白屏的问题：

*  需要安装babel-polypill插件

npm install babel-polyfill --save

然后在main.js中引入

import 'babel-polyfill'

*  还有在安卓手机上出现点击城市列表页无效的情况：你使用了better-scroll，默认它会阻止touch事件。所以在配置中需要加上click: true

mounted(){
        this.scroll=new Bscroll(this.$refs.wrapper, { mouseWheel: true, click: true, tap: true })
      }

### Vue项目的打包上线 ###

直接执行打包的命令：

npm run build

然后将打包的项目交给后端的小伙伴部署就可以了

如果这个打包的项目不是直接放在服务器的根目录下，就需要修改配置文件：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 2][]

例如，你需要将打包的项目放在根目录下的project文件夹下，只需要将上图中绿框中的配置项修改了

assetsPublicPath: '/project',

### 异步组件实现按需加载 ###

对vue项目进行打包操作，npm run build 命令。生成dist文件夹

![20181218211954717.png][]

index.html是我们项目打包出来的入口文件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 3][]

css.map是用来调试css代码的，在线上有用的是.css文件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 4][]

js.map都是辅助文件：

*  manifest.js是webpack打包生成的配置文件
 *  vendor.js是各个页面，各个组件公用的代码
 *  app.js是项目中各个页面的逻辑代码；例如：在我们访问主页时，不需要访问列表页和详情页的内容，但是我们依然把列表页和详情页的js代码加载进来了

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 5][]

这种异步组件加载方法不仅可以用于路由当中，也可以用于组件当中

组件形式的异步加载：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 6][]

### 项目总结 ###

提升vue的使用能力：

*  把vue文档左侧没有掌握的知识点自己了解学习达到掌握
 *  打开vue核心插件vue-router，掌握vue-router知识点
 *  打开vue核心插件vuex，掌握vuex知识点，达到在大型的vue项目中熟练使用vuex
 *  Vue.js服务端渲染指南
 *  使用vue资源中的各种插件（vue官方文档/生态系统/vue资源）
 *  最后可以研究vue的源码

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70]: /images/20220405/25337eba5c3e42a5afe7dc72e605a496.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 1]: /images/20220405/57c15ab8bbea4084abeb8eb46d0bcaee.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 2]: /images/20220405/3c08ce7ef9b74e76b85cdeb590acba00.png
[20181218211954717.png]: /images/20220405/e0dd919c6b4745c48e525dcfa750957e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 3]: /images/20220405/6a0f0bfd23544203a5bcbfac62dbdf56.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 4]: /images/20220405/968aa44a3fbe438896b22a062c9dd2bc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 5]: /images/20220405/07a00244741e4f6fb44fdd71d9b48f30.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 6]: /images/20220405/af20ce937e394106bf7ee2afa62cf1e2.png