Vue项目build打包后如何运行

之前用Vue做了一个登录系统的项目，使用npm run build命令进行打包，经过vue-cli3.0版本的优化，打包后的dist文件夹体积非常小，我的才200K左右，可以看出Vue打包的优化十分不错，但是直接打开index.html是无法看到内容的，因为无法加载其中的内容，所以必须使用服务器来打开网页，我笔记本上装了express，所以就使用express来查看这个项目，介于有的朋友刚学Vue对于build打包后如何查看网页这点有疑问，我就给出解决办法：

1.全局安装express-generator生成器。

express-generator是express新版本分离出来的命令工具，想要使用express命令必须装这个依赖。

npm install express-generator -g // 也可使用cnpm比较快

2.创建一个express项目。

express expressName // expressName是项目名

3.进入项目目录，安装相关项目依赖。

cd expressName

npm install // 或cnpm install

4.将Vue build后生成的dist文件夹下的所有文件复制到express项目的publick文件夹下面，然后运行  npm start 来启动express项目。

5.打开浏览器，输入localhost:3000就可以看到效果了。

备注：这个3000是你自己设置的端口号，如果你设置888，那么你就要输入localhost:888。

但打包完后有时候点击index.html，通过浏览器运行，出现以下报错，如图：

1、查看package.js文件的scripts命令

2、打开webpack.dev.conf.js文件，找到publicPath: config.dev.assetsPublicPath,按Ctrl点击，跳转到index.js文件

3、其中dev是开发环境，build是构建版本，找到build下面的assetsPublicPath: '/',然后修改为assetsPublicPath: './',即“/”前加点。

4、终端运行 npm run build 即可。

此时点击index.html，通过浏览器运行便，会发现动态绑定的static的图片找不到，故static必须使用绝对路径。将图片路径修改为绝对路径，至此，打包完成。

还有什么问题大家可以留言，我能帮忙解决的会第一时间回复。

Object.defineProperty()

方法会直接在一个对象上定义一个新属性，或者修改一个已经存在的属性， 并返回这个对象。

Object.defineProperty(obj,prop,descriptor)

参数

obj：需要定义属性的对象。

prop：需定义或修改的属性的名字。

descriptor：将被定义或修改的属性的描述符。

对象里目前存在的属性描述符有两种主要形式：数据描述符和存取描述符。数据描述符是一个拥有可写或不可写值的属性。存取描述符是由一对 getter-setter 函数功能来描述的属性。

数据描述符和存取描述符均具有以下可选键值：

configurable

当且仅当该属性的 configurable 为 true 时，该属性描述符才能够被改变，也能够被删除。默认为 false。

enumerable

当且仅当该属性的 enumerable 为 true 时，该属性才能够出现在对象的枚举属性中。默认为 false。

数据描述符同时具有以下可选键值：

value

该属性对应的值。可以是任何有效的 JavaScript 值（数值，对象，函数等）。默认为 undefined。

writable

当且仅当该属性的 writable 为 true 时，该属性才能被赋值运算符改变。默认为 false。

存取描述符（第三个参数对象）同时具有以下可选键值：

get

一个给属性提供 getter 的方法，如果没有 getter 则为undefined。当我们读取某个属性的时候，其实是在对象内部调用了该方法，此方法必须要有return语句。该方法返回值被用作属性值。默认为 undefined。

set

一个给属性提供 setter 的方法，如果没有 setter 则为 undefined。该方法将接受唯一参数，并将该参数的新值分配给该属性。默认为 undefined。也就是说，当我们设置某个属性的时候，实际上是在对象的内部调用了该方法。

parse

parse 会用正则等方式解析 template 模板中的指令、class、style等数据，形成AST。

optimize

optimize 的主要作用是标记 static 静态节点，这是 Vue 在编译过程中的一处优化，后面当 update 更新界面时，会有一个 patch 的过程， diff 算法会直接跳过静态节点，从而减少了比较的过程，优化了 patch 的性能。

generate

generate 是将 AST 转化成 render function 字符串的过程，得到结果是 render 的字符串以及 staticRenderFns 字符串。

用 addSub 方法可以在目前的 Dep 对象中增加一个 Watcher 的订阅 *** 作；

用 notify 方法通知目前 Dep 对象的 subs 中的所有 Watcher 对象触发更新 *** 作。

首先在 observer 的过程中会注册 get 方法，该方法用来进行「依赖收集」。在它的闭包中会有一个 Dep 对象，这个对象用来存放 Watcher 对象的实例。其实「依赖收集」的过程就是把 Watcher 实例存放到对应的 Dep 对象中去。get 方法可以让当前的 Watcher 对象（Dep.target）存放到它的 subs 中（addSub）方法，在数据变化时，set 会调用 Dep 对象的 notify 方法通知它内部所有的 Watcher 对象进行视图更新。

首先说一下 patch 的核心 diff 算法，我们用 diff 算法可以比对出两颗树的「差异」，我们来看一下，假设我们现在有如下两颗树，它们分别是新老 VNode 节点，这时候到了 patch 的过程，我们需要将他们进行比对

diff 算法是通过同层的树节点进行比较而非对树进行逐层搜索遍历的方式，所以时间复杂度只有 O(n)，是一种相当高效的算法，如下图。

这张图中的相同颜色的方块中的节点会进行比对，比对得到「差异」后将这些「差异」更新到视图上。因为只进行同层级的比对，所以十分高效。

首先在 oldVnode（老 VNode 节点）不存在的时候，相当于新的 VNode 替代原本没有的节点，所以直接用 addVnodes 将这些节点批量添加到 parentElm 上。

然后同理，在 vnode（新 VNode 节点）不存在的时候，相当于要把老的节点删除，所以直接使用 removeVnodes 进行批量的节点删除即可。

最后一种情况，当 oldVNode 与 vnode 都存在的时候，需要判断它们是否属于 sameVnode（相同的节点）。如果是则进行patchVnode（比对 VNode ） *** 作，否则删除老节点，增加新节点。

假设我们有如下这么一种情况。

当我们按下 click 按钮的时候，number 会被循环增加1000次。

那么按照之前的理解，每次 number 被 +1 的时候，都会触发 number 的 setter 方法，从而根据上面的流程一直跑下来最后修改真实 DOM。那么在这个过程中，DOM 会被更新 1000 次！太可怕了。

Vue.js 肯定不会以如此低效的方法来处理。Vue.js在默认情况下，每次触发某个数据的 setter 方法后，对应的 Watcher 对象其实会被 push 进一个队列 queue 中，在下一个 tick 的时候将这个队列 queue 全部拿出来 run（ Watcher 对象的一个方法，用来触发 patch *** 作） 一遍。

因为 number 执行 ++ *** 作以后对应的 Watcher 对象都是同一个，我们并不需要在下一个 tick 的时候执行 1000 个同样的 Watcher 对象去修改界面，而是只需要执行一个 Watcher 对象，使其将界面上的 0 变成 1000 即可。

那么，我们就需要执行一个过滤的 *** 作，同一个的 Watcher 在同一个 tick 的时候应该只被执行一次，也就是说队列 queue 中不应该出现重复的 Watcher 对象。...

number 会被不停地进行 ++ *** 作，不断地触发它对应的 Dep 中的 Watcher 对象的 update 方法。然后最终 queue 中因为对相同 id 的 Watcher 对象进行了筛选，从而 queue 中实际上只会存在一个 number 对应的 Watcher 对象。在下一个 tick 的时候（此时 number 已经变成了 1000），触发 Watcher 对象的 run 方法来更新视图，将视图上的 number 从 0 直接变成 1000。

参考于 https://juejin.im/book/5a36661851882538e2259c0f

---