您的位置：首页 > Web前端 > Vue.js

Vue | vue cli入口文件解析（main.js,app.vue,index.html webpack）

2019-01-15 18:16 911 查看
版权声明：转载时请说明作者与出处 https://blog.csdn.net/qq_36145914/article/details/86497123

目录

  • 4.结束

    • 若文章有任何纰漏或未涉及你想了解的内容，欢迎在评论提出，我会尽最快速度回复。

    前言

    本文解析采用cli 2做示例，但原理同样适用于vue cli 3
    若你是cli 3开发者，参考本文时，仅需注意下面三点区别。

    cli3的改动：

    1. 内化默认配置文件（相关文件位于node_modules/@vue/cli-service/lib/config），开发者可通过新增vue.config.js添加webpack配置。
    2. index.html被放到了public文件夹下
    3. webpack配置的书写使用webpack-chain 风格

    1.入口文件的概述

    • 在vue cli构建的项目中，main.js是项目的入口文件，定义了vue实例，并引入根组件app.vue，将其挂载到index.html中id为‘app’的节点上。

      main.js:
    import Vue from 'vue'
import App from './App'

/* eslint-disable no-new */
new Vue({
el: '#app', //挂载点
components: { App }, // 根组件
template: '<App/>'
})
    • 注意：
      vue实例挂载后，会对节点原内容进行覆盖。所以，即便index.html和app.vue中都定义了
      <div id="app"></app>
      , 最终网页也不会出现两个id为app的节点。

    index.html：

    <body>
<div id="app"></div>
</body>

    app.vue:

    <template>
<div id="app">
.....
</div>
</template>

    2.问题

    main.js的作用已经明了，但仍有三个疑问:

    1. main.js为什么叫入口文件，“入口文件”是什么概念？
    2. 若不做特殊设置，index.html实际页面中仅挂载了app.js一个脚本，所有组件去哪儿了，app.js是如何形成的？
    3. vue实例化在main.js中，但在index.html中并没有引入main.js，main.js与index.html是如何产生关联的?

    3.VUE CLI 基于Webpack

    vue cli实际上是一个集成预设置的webpack项目。本质上是webpack驱动了整个项目的打包，上传，运行和热重载。
    而上述问题都是由webpack逐一处理的：

    1. 入口文件是一个webpack概念；入口文件指示 webpack 应该使用哪个模块作为构建其内部依赖图的开始。
    2. app.js是由webpack打包生成的输出文件。
    3. 而将app.js挂载到index.html这一过程是由html-webpack-plugin完成的。

    3.1什么是webpack

    在现代前端开发中，我们会使用存在依赖，封装过的js模块，比如vue中的.vue文件，less等预编译CSS。浏览器无法直接识别这些文件，而人工处理这些文件会随项目规模的扩大而愈发艰难。
    而webpack则帮助我们解决了问题。它将复杂，相互依赖，预编译的文件编译打包整理成浏览器能识别的原生js/css，同时负责依赖管理，优化结构，减少冗余，从而提高性能。

    3.2 webpack配置文件

    vue cli 2 在build目录下有共有三种场景配置 ——webpack.base/dev/prod.conf.js
    base是基础配置，dev/prod分别是开发和产品场景的配置，它们在merge基础配置后进行相应的个性配置。在本地运行时，会根据你的命令选择不同的配置文件进行打包运行。
    如npm run dev就是使用开发环境配置。
    一个配置文件中包含了入口文件，输出和各种插件的配置。

    3.3 入口文件的定义

    入口起点(entry point)指示 webpack 使用哪个模块作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。

    如下是vue默认的入口起点，它正是“入口文件”main.js。

    entry: {
app: './src/main.js'
},

    有关webpack的入口设置，这里不展开讲。
    如果你要做多页面项目，而非默认的SPA，那么你要为每个页面设置一个入口。如果你要将app与第三方库分离，也要设置两个入口。
    这些操作可参考webpack的官方文档

    webpack官方文档
    https://www.webpackjs.com/concepts/entry-points/

    如果你想要封装自己的UI库，那么在入口部分的设置，你可以参考以下这篇文章。（这篇文章的其它部分并不是最佳实践，可行但仅供参考！以后有空再详述组件化）

    实现element-ui的按需引入，按需打包加载
    https://segmentfault.com/a/1190000015884948

    3.4 输出文件的定义

    紧接着entry，定义的就是项目的输出设定。根据不同的环境配置，webpack会选择相应的publicpath，默认有开发和产品两种模式。

    output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},

    filename定义的是输出文件的名称，[name]是webpack中占位符的一种，它对应entry中对象的键名。比如默认入口定义中仅有一个入口–app。那么本项目最终打包生成的文件就是app.js。

    filename： '[name]'.js

    3.5 HtmlWebpackPlugin

    最后，由htmlwebpackplugin插件完成index.html文件生成与挂载JS脚本。
    HtmlWebpackPlugin默认挂载的模板就是根目录下的index.html。
    inject属性定义了js脚本加载的位置，默认值true，则在body最下方加载。
    你还可以添加其它参数，比如网站图标favicon等，这一系列参数均可参考webpack官方文档。

    new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true,
favicon:'static/img/temple.png'
})

    4.结束

    最终，你可以通过 npm run dev在开发环境下对项目进行打包，并在浏览器运行项目。它呈现出的模样如下所示：

    内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
    标签： 
    相关文章推荐
    新的分享
    章节导航