首页 > Web开发 > 详细

webpack--vue

时间:2021-09-17 16:19:34      阅读:6      评论:0      收藏:0      [点我收藏+]

一. 在webpack里打包vue

下载vue3.0

npm install vue@next

二.Vue源码的打包

引入vue

技术分享图片

打包后报了一个警告

页面上也没有进行渲染

组件提供了模板选项,但此 Vue 版本不支持运行时编译。 配置你的 bundler 将“vue”别名为“vue/dist/vue.esm-bundler.js”

技术分享图片

技术分享图片

原因是:import导入的vue默认是:vue.runtime.esm-bundler.js这个版本;
runtime版本不包含 compiler,所以不会对 template进行编译

解决方法:
手动指定 vue.esm-bundler.js

技术分享图片

vue的不同版本解析

技术分享图片

带runtime:

  • 不包含compiler,
  • 如果不包含compiler也不会去编译template了

带prod

  • 压缩版本

compiler是干嘛的?

  • 用来编译 template的
vue(.runtime).global(.prod).js:
  • 通过浏览器中的 <script src=“...”> 直接使用;
  • 我们之前通过CDN引入和下载的Vue版本就是这个版本;
  • 会暴露一个全局的Vue来使用;
vue(.runtime).esm-browser(.prod).js:
  • 用于 webpack,rollup 和 parcel 等构建工具;
  • 构建工具中默认是vue.runtime.esm-bundler.js;
  • 如果我们需要解析模板template,那么需要手动指定vue.esm-bundler.js;
vue.cjs(.prod).js:
  • 服务器端渲染使用;
  • 通过require()在Node.js中使用;

运行时 + 编译器 VS 仅运行时:

技术分享图片

区别:

技术分享图片

运行时 + 编译器版本 和 仅运行时版本的优缺点

Runtime Only (运行时版本)
  1. 指定render函数,如上图
  2. 通常借助webpack的vue-loader工具,在构建时进行了预编译(将.vue文件编译为js)。所以该版本只包含运行时的 Vue.js 代码
  3. webpack打包时已经将template编译为render函数(template 会通过 vue-template-compiler 转换为 render 函数),不需要在客户端进行编译
runtime-compiler(编译器 + 运行时版本)
  • 编译器:用来将模板字符串编译成为 JavaScript 渲染函数的代码。
  1. 有指定template字符串,如上图,或者挂载到一个元素上并以其DOM内部的HTML作为模板
  2. 如果没有对代码做预编译,但又使用了Vue的template属性并传入一个字符串,需要在客户端编译模板
  3. 打包时不进行编译,在运行的时候,才去编译template
  4. 体积较大

三. 正式打包:、

编写APP.vue文件

技术分享图片

App.vue的打包过程

我们对代码打包会报错:我们需要合适的Loader来处理文件。

技术分享图片

我们对代码打包会报错:我们需要合适的Loader来处理文件。

npm install vue-loader -D

在webpack的模板规则中进行配置:

技术分享图片

再次打包发现还是报错

  • 打包依然会报错,这是因为我们必须添加@vue/compiler-sfc来对template进行解析:

技术分享图片

npm install @vue/compiler-sfc -D

另外我们需要配置对应的Vue插件:

技术分享图片

重新打包即可支持App.vue的写法

技术分享图片

全局标识的配置

技术分享图片

技术分享图片

技术分享图片

webpack--vue

原文:https://www.cnblogs.com/cl1998/p/15302913.html

(0)
(0)
   
举报
评论 一句话评论(0
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!