webpack 结合 Vue-Loader 打包单文件组件实战

时间:2022-06-11

对于网站建设公司来讲在main中引入vue因为没有确切的指定版本,所以他会默认导入运行时版本(不具有编译功能),我们有两种解决方法,第一种就是指定确切版本,第二种就是在 webpack.config.js 配置好命令,使导入vue就是导入完整版的vue.js。


1、项目结构

image.png


因此把Hello.vue重命名为App.vue;src文件夹下添加router.js文件;src 文件夹下添加 components 文件夹,项目大还可以在components 文件夹下再进行组件分类,建立不同的文件夹。

index.html 文件 body 节中添加:

<!-- 这是 vue 的入口 -->

<div id=“app”></div>



2、下载安装 vue,这里指定版本

image.png



3、如何引用 vue 文件【编写 main.js 文件代码】

原来我们都是通过下面代码引入 vue。
<script src=“js/vue.js”></script>
现在我们只要在 main.js 把 vue 作为一个组件引入即:


image.png



4、打包项目 npm start

之后打开打包后的文件 bundle.js 文件。有 9000 多行代码,把vue 文件内容都打包进去了。打开打包后的index.htm(l 即是 dist目录下的 index.html 文件),多了下面一句。

<script type=“text/javascript” src=“bundle.js”></script>



5、运行 index.html

访问 dist/index.html ,发现App组件没有被渲染出来,按 F12查看控制台发现报警告:

image.png


这种方法导入的 vue 不是完整版本,对于网站建设公司来说,不具有编译功能,即不能对 App.vue 进行编译,而我们需要编译成浏览器能够识别的 js 代码,这种方法导入是运行时版本。也就是说,template 渲染的字符串,运行时版本 vue 无法解析。

为什么说默认导入的是运行时版本的 vue 呢?因为import Vue from ‘vue’ 导入的 vue 文件默认是node_modulesvue package.json 中的 main 属性指定的文件,可以发现它并不是我们熟悉的 vue.js 完整版文件,import 的是运行时版本

【 “main”:“dist/vue.runtime.common.js”】,不是完整版。



image.png



但是我们不好对安装的依赖文件夹下的 node_modulesvue package.json 中的 main 属性进行修改,因为只要后续用户一安装那个 vue 就会覆盖了。那怎么办呢?


6、解决组件内容没有渲染出来

因为默认 main.js 文件中导入的不是 vue 完整版,下面提供 2种解决方案:

第 1 种解决方法:

就在 main.js 文件中把导入的 vue 改为完整版本,即如下:

import Vue from ‘vue/dist/vue.js’

这里 vue 自然会找到根目录下的 node_modules 文件夹下的 vue。然后重新打包 npm start,完了之后可以查看下打包后的

bundle.js 文件发现有 12000 多行,就是因为这时打包的是完整版的vue.js。最后再重新运行 dist/index.html,发现 App.vue 组件中的内容渲染出来了。

image.png

但是这种解决方案不是很好的。用的不多

第 2 种解决方案:

(1)main.js 导入 vue 的代码保持不变

import Vue from ‘vue’

(2)在 webpack.config.js 增加一个属性,放在最后一个 } 前即可。

……

, // 去引用完整版 vue.js

resolve:

{

alias:

{ ‘vue$’: ‘vue/dist/vue.js’ }

}

}

重新打包,npm start,打包之后之后可以查看下打包后的bundle.js 文件发现有 12000 多行,就是因为这时打包的是完整版的vue.js。最后重新运行下 dist/index.html,发现 App.vue 组件中的内容渲染出来了。



Copyright © 2016 广州思洋文化传播有限公司,保留所有权利。 粤ICP备09033321号

与项目经理交流
扫描二维码
与项目经理交流
ciya68