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

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

1、项目结构

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

index.html 文件 body 节中添加:

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

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

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

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

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

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查看控制台发现报警告：

这种方法导入的 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”】，不是完整版。

但是我们不好对安装的依赖文件夹下的 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 组件中的内容渲染出来了。

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

第 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 组件中的内容渲染出来了。