vue-cli工程模板和构建工具的详细说明

时间：2021-08-29 来源：互联网编辑：宝哥软件园浏览：次

Vue-cli提供的脚手架只是最基础的一个，也可以说是Vue团队考虑的工程结构的最佳实践。对于初学者或者之前从事过AngularJS/React开发的用户来说，对于开发环境可能有自己的习惯用法和熟悉的工具，但是我建议如果我们使用Vue来开发，首先要遵循官方的推荐，在掌握了Vue推荐的环境配置之后，再根据实际情况进行相应的调整，这样会少走一些弯路，节省很多时间。

下面我们要讨论的工程结构都是围绕webpack展开的——simple和webpack，而browserify只是在这两个模板的基础上移植的一个版本，这里不再赘述。

webpack和webpack-simple这两个模板在文件结构方面几乎相同，只是一个是简化版本，另一个是完整版本。实际上，webpack-simple是基于[emailprotected]配置的版本，而webpack模板是基于Webpack ^1.3.2.配置的两个版本暂时不兼容，使用的依赖包版本也不同。因此，不要将webpack模板创建的项目文件结构复制到webpack-simple进行直接替换升级，而是删除node_modules中安装的所有依赖包，然后在迁移成功之前重新安装，这需要注意。

1 . web pack-简单模板

下面是由webpack-simple模板构建的项目的项目目录结构：

readme . MDindex.htmlpackage . JSONsrcapp . vue资产logo.png这个模板值得一提的是src目录，所有vue代码源程序都放在这个目录中。由五个模板构建的src目录都是相同的，只是在webpack模板中有更多的组件目录用于存储公共组件。

2.webpack模板

webpack模板的工程目录结构如下：

readme.mdbuildbuild . jscheck-versions . jsdev-client . jsdev-server . jsutils . jsweb pack . base . conf . jsweb pack。dev . conf . jswebpack.prod.conf.jsconfigdev . env . jsindex . jsprod . env . jstest.env.jsindex.htmlpackage.jsonsrcapp . vue资产logo . png组件hello . vue主. js静态测试当你把它投入到真正的项目开发中，你会觉得这个模板非常实用。

所以我们有必要花一些时间去了解这个模板的结构和它提供的工具的配置，掌握Vue官方团队进行项目开发的环境配置和使用思路，以便我们根据自己的实际情况进行适当的配置和调整。

上面我们已经提到了src目录的用法和约定，这里就不再赘述了。项目根目录下还有四个目录，功能如下：

build——存储用于编译的webpack配置和相关辅助工具代码；

config——存储三个环境配置文件，用于设置环境变量和必要的路径信息；

test——存储E2E测试和单元测试文件以及相关的配置文件；

static——存储项目所需的其他静态资源文件；

dist——存储运行npm run build指令后生产环境的输出文件，可以直接部署到服务器对应的静态资源文件夹，只有运行build后才会生成。

可以看出，这些目录的存在依赖于模板中配置的开发工具，webpack模板配置了以下工具。

3.构建工具

由于开发、测试和生产环境都需要构建，它们的配置会根据不同的环境需求而有所不同，我们将在下面的研究中定制和修改具体的配置，所以我们应该清楚地了解webpack模板是如何构建的。

编译开发环境

通过以下说明在开发环境中加载并运行Vue项目：

$ npm运行开发

这个指令的配置是在package.json的script属性中设置的，本质上，npm指导执行门户dev-server.js完成以下加载过程：

(1)加载环境变量

在这个阶段，从配置目录加载两个模块，index.js和dev.env.js，以准备开发调试环境所需的一些目录和全局变量。

(2)合并网络包配置

在构建目录下有三个webpack配置文件：

Webpack.base.conf.js——常用基本Webpack配置；

Webpack.dev.conf.js——开发环境专用Webpack配置项；

Webpack.prod.conf.js——特定于生产环境的Webpack配置项。

在本文中，一个名为webpack-merge的包被用来合并两个webpack配置。在这一步中，webpack.base.conf.js和webpack.dev.conf.js通过这个包合并到最终的webpack配置中。

(3)配置热加载

热加载是一个很好的功能。这个功能的效果是，当开发环境启动并进入调试模式时，一旦我们在任何地方修改了源代码，浏览器中相应的内容就会自动刷新，无需手动刷新浏览器。当我们调整页面布局或功能时，这种配置会有很大的帮助。

以前环境中的合并webpack配置也通过此链接动态加载。当代码文件更改时，热加载将启动webpack进行重新编译，然后将最新编译的文件重新加载到浏览器中。

(4)配置代理服务器

这个环境是为了给我们的代码添加一个模拟服务器做准备。有了它的存在，我们可以直接模拟远程服务器执行的一些请求的效果，而不需要后端程序的支持。例如，如果我们向服务器发送一个HTTP GET/api/books/请求，那么我们可以通过代理服务器拦截该请求，然后返回一组该api应该成功执行的结果，这样我们的前端程序运行的效果和访问服务器后的效果是一样的。我们称这种技术为服务模拟，我们将在下面的研究中详细介绍这种技术。

(5)配置静态资源

图像、字体、样式表和编译好的JS脚本被生成并存储在开发服务器托管的静态虚拟目录中，这样我们就可以在浏览器中正常访问这些资源。每个生成文件的足迹都是一些哈希码，当文件内容发生变化时，这些哈希码就会发生变化。足迹是将静态文件发布到CDN或离线缓冲时通知浏览器文件是否发生变化的重要依据。

(6)加载开发服务器

启动一个Express Web服务器，加载上述环境中配置的模块，并使程序可以通过浏览器访问。

以上就是npm run dev的完整实现思路。

编译生产环境

当项目准备好发布时，在命令行中键入：

$ npm运行构建

实施效果如下：