vue打包 Vuejs技术栈从CLI到打包上线实战全解析

前言

本文是我自己的vue项目实践的总结。对于Vue2及相关技术栈，实际使用的版本是2.3.3。

开发前关于vue-cli的注意事项

开发前至少要看一遍vue的官方文档和API(看官方文档是最重要的，比看50、100个博客要好)。建议阅读英文阅读能力好的英文文档，但中文文档会稍有落后，也要阅读相关的vue-router、axios、vuex等。

一般来说，我们首先使用vue-cli来构建项目的基本结构。

vue-cli的官方temaplte地址，我们选择webpack版本，建议查看其文档vue-web pack-样板了解基本用法和项目配置。

关于对网络包配置的深入理解，请参见网络包配置分析

为团队创建脚手架

虽然vue-cli功能强大，但是它有很多步骤供我们选择配置。其实公司业务的很多配置都是固定的。比如我们公司规定要装vue-router，要用标配的Eslint等等。，并且必须使用sass，因此NPM必须安装node-sass和sass-loader，并且还必须在vue-cli配置完成后安装axios。因此，我们不应该一步一步地选择vue-cli的配置，然后在每次构建新项目时安装sass。而是要根据公司自身情况搭建一个基于vue-cli的团队脚手架，整个项目只需要运行脚手架就可以初始化。

目录结构

建议在src/ directory中添加视图或页面目录，存储相应的路由组件，添加api目录，并根据项目情况添加过滤器、vuex等目录。组件目录存储公共组件或全局组件。每个组件目录都可以将图片等资源放在一起。建议将组件的子组件目录命名为子组件，并放在父组件目录下。例如，主组件目录是home/home.vue，子组件横幅路径是home/chldren/banner/banner.vue。

静态资源处理

vue-web pack-boile plate文档有静态资源处理的详细描述，但是发现很多人还不知道，这里就提一下。

在vue-web pack-boile plate的项目结构中，我们有两个静态资源目录:src/assets和static/

资产目录中的文件将由webpack处理，并且只支持相对路径形式。assets/logo.png将被编译成。/assets/logo . png/assets/logo . png不受支持

在js中，我们可以得到这样的文件资源路径

要求('。/assets/logo.png ')

以下带有~的前缀类似于require效果

<img src="~assets/logo.png">& ltimg src="~assets/logo.png">。

静态目录中的静态资源不会被webpack处理，所以适合放一些不需要webpack处理的外部资源，构建后的静态资源会放在这个目录中。

Vue组件化

关于vue组件化，360怪舞团的前端工程师pptVue.js写得很好，如何用Vue2.0开发丰富的交互WEB应用，这一节的内容也来自于此。Ppt提到了组件化带来的新问题:通信、复用、耦合，以及如何解决。

通信

1)道具和事件:道具放下，事件抬起

2)函数调用:this.refs

3)组件树:$父级。$parent

4)共享状态

5)eventbus

6)外部6)vue技术堆栈，如本地存储等

多路技术

1)冗余:如果、否则如果和否则判断执行不同的代码

if(this . type = = ' editing '){//某些编辑代码} else if(this . type = = ' preview '){//某些预览代码} else if(this . type = = ' present '){//某些当前代码} else { //某些基础代码}

2)包装:插槽

//plugin-page . vue & lt；div>。& ltslot name="page ">。我是一页& lt/slot>。& lt/div>。//present-plugin-page . vue & lt；div class="PresetPluginPage " >& ltplugin-page ref="page " >& ltp slot="page ">。我是当前页面& lt/p>。& lt/plugin-page>。& lt/div>。//输出& ltdiv class="PresetPluginPage " >& ltdiv>。& ltp>。我是当前页面& lt/p>。& lt/div>。& lt/div>。

3)继承:mixins

//定义一个mixin objectvar myMixin = { created:function(){ this . hello()}，方法:{ hello:function(){ console . log(' hello from mixin！')} }}//定义一个使用这个mix invar Component = Vue . extend({ mixins:[Mymixin]})var Component = new Component()///-->的组件；"你好，米辛！"组件耦合

1)组件耦合引起的问题:

单个组件的修改很困难

组装新部件的困难

组件调试很困难

2)去耦

脱钩的本质是分离变化

首先，组件只有一个功能

//错误& ltcontrol-input type="number " >& lt/control-input >//右& lt控制号>号。& lt/control-number >

第二，采用稳定的接口

//错了这个。$parent。$parent。$refs['resource-image']。open()// rightbus。$emit('open-resource-image ')

第三，处理共享部分

bindEvents (remove) { let方法= remove？removeEventListener:“”AddEventListener“window[method](“resize”，this.handleResize)}

3)与服务器断开连接

这个。$http.get('/user/detail ')。然后(({body}) = >{ this.user = JSON.parse(body)。数据}，err =>。{ console . error(err)})user . detail()。然后(detail = >;this.detail = detail)

服务器和前端系统是不同的

同步异步转换

多服务器/跨域代码

统一错误处理代码

vuex使用中的一些注意事项

1)不要滥用vuex

使用Vuex并不意味着需要把所有状态都放入Vuex。虽然把所有的状态放入Vuex会使状态的改变更加显式，更容易调试，但也会使代码变得繁琐和不直观。如果某些状态严格属于单个组件，那么最好将其用作组件的局部状态。您应该根据您的应用程序开发需求进行权衡和确定。

2)最好在根实例中注册store选项，它会被注入到根组件下的所有子组件中，子组件可以通过这个进行访问。$store。当有许多状态时，使用建议的mapState辅助功能。

3)polyfill

本项目使用Vuex，因此为了与IE9等较低版本兼容，必须引入polyfill-es6-promise of Promise。安装NPM后，在main.js:

axios导入导入开发常见问题' es6-承诺/自动'

为了与后端数据进行交互，我们通常会引入axios库。如下添加到main.js中vue的原型中，这样就可以通过这个获得axios了。组件中的$http:

object . define property(vue . prototype，' $ http '，{value: axios})//或object . define property(vue . prototype，' $ axios '，{ value:axios })

这种做法没有采用这种方法，而是创建了一个用于统一管理的getData.js:

从' axios ' const GetSamPle =(param 1，param2) = >导入axios。axios.get(url，{ params: { param1: param1，param2: param2 }})导出{ GetSession }

在单个文件组件中，可以再次调用导入getSomething方法。

介绍图标字体

直接在main.js中导入你下载的iconfont.css

js中的判断环境

共同的要求是开发环境应该是控制台，但在线环境不应该是控制台。有三种默认环境:“开发”、“生产”和“测试”。

if (process.env.NODE_ENV！= = ' production '){ console . log(data)}设置数据模拟请求Mock

数据模拟请求使用Mock.js来配置文档，但这只是一个简单的数据模拟，并没有生成文档。Ali RAP可以用于文档、mock.js、可视化、Rest、接口转换、文档修改提醒、本地部署支持等更全面的功能。

安装npm install mockjs后，可以在/src/api目录中创建新的data.js并导入mockjs。然后可以根据开发环境在程序入口或者api入口导入data.js。以下是几个例子:

从' mock js '导入mock让data = mock . mock({ ' list | 1-10 ':[{ ' id |+1 ':1 }]})//mock a data console . log(JSON . strict(data，null，4)从' mock js' mock.setup导入mock({ time out:' 300‐500 ' })mock .//log in/，{ code:0 })//拦截登录请求。返回对象{代码:0}从' mock js ' mock . setup({ time out:' 300‐500 ' })mock . mock(sitemap . CMS . bangs，{ results:[]})//截取sitemap中的CMS . bang请求并返回对象

您可以使用服务器端渲染或预渲染来预渲染webpack插件的github地址。

Webpack

在实际项目中，修改webpack的配置是不可避免的。如果不知道怎么改，可以查看webpack的配置分析进行修改。

配置全局变量

要设置全局变量，可以在build中的webpack.base.conf.js中配置externals，这与模块的级别相同:

外部:{ sitemap: 'sitemap'}

然后在模块中添加这样的配置。

全局:{'sitemap': false}根据不同的环境加载不同的js

在这个项目中，应该根据不同的环境(开发环境、测试环境和生产环境)加载不同的sitemaps.js。这个sitemap.js将公开一个全局sitemap变量，它是一个由api地址组成的json对象。使用HtmlWebpackPlugin插件的选项选项来实现。

用index.html写这个:

& ltsrc="<。% = HTMlWebPackplugin . options . src % & gt；">。& lt/>。

然后在build中的conf.js的HtmlWebpackPlugin中设置不同的src，比如在开发环境中添加src:

新的html webpackplugin({ filename:' index.html '，模板:' index . html '，src:'//dev . example . com/API/sitemap . js '，inject: true})配置别名

在webpack.base.conf.js中，vue-cli已经默认将src目录的别名配置为@了。建议配置src以下目录的别名，这样可以减少重复写，更美观。添加src、页面和组件的别名，如下所示:

解析:{扩展:['。js '，'。vue '，'。json']，别名:{ 'vue$': 'vue/dist/vue.esm.js '，' @': resolve('src ')，' src': resolve('src ')，Pages ':path . resolve(_ dirname ')../src/pages ')，' components ':path . resolve(_ dirname，'../src/components')}}图像压缩

您可以使用webpack插件image-webpack-loader来压缩和处理图像。

多页

其实就是添加多个条目js，然后修改相应的配置。网上有很多信息，搜索一下就知道了。

eslint

有时我们需要关闭一些代码检查。具体配置请参见配置ESLint-ESLint中文。以下是两个常见的例子:

1)关闭eslint

/* ESL int-disable */alert(' foo ')/* ESL int-enable */

2)关闭新的禁令

/* ESL int-禁用no-new */优化和其他优化

1)因为vue跟踪对象变化的原理是基于Object.defineProperty的使用，当处理大量数据而不跟踪对象变化时，对象可以被Object.freeze(数据)冻结，以优化数据渲染处理

2)vue-router路由延迟加载。当应用程序被打包和构建时，java包将变得非常大，这将影响页面加载。如果能把不同路由对应的组件分成不同的代码块，然后在访问路由时加载对应的组件，效率会更高。

其他的

1)使用表驱动的方法注册全局过滤器和指令，比如在src下创建一个新的过滤器目录，在index.js中导入所有的全局过滤器:

从“”导入毫格式。/milliFormat“从反向导入”。/reverse '导出默认值{ milliFormat，reverse}

然后在main.js中注册

从“”导入公共过滤器。/filters/index ' object . key(common filtes)。forEach(键= >;Vue.filter(key，commonFiltes[key])

2)对于一些强耦合的组件，比如collapse和collapse-item，可以使用$parent和$children进行通信。不需要像elementUI那样实现组件的广播和调度。我还发现UI库实际上是用总线进行通信的，导致同一页面出现两个折叠，会互相影响。

3)在根组件上注册了公共过滤器之后，除了在“小胡子”语法中使用之外，还可以通过这个获得组件中的datetime过滤器。$ root。$ options.filters.datetime(数据)。

在线包装优化分析

npm运行构建报告分析包的大小，并直观地看到需要优化的地方。

测试生成文件

成功构建后，会有一个提示提示，提示您构建的文件需要部署在http服务器上，不能通过文件协议打开。

我们可以通过节点静态启动服务。您可以编写一个js配置文件从节点开始，或者在CLI中输入static dist(先安装node-static):

$ static distserving " dist " http://127 . 0 . 0 . 1:8080

有关更多信息，如设置端口，请单击上面的链接查看文档。

附言

本文最重要的是文中给出的一些链接，尤其是前期开发通知部分的链接，所以最好点进去通读。

途经:http://www.cnblogs.com/ang-/p/7082202.html