Index.html 和 main.js是怎么关联起来的

最近看了不少的项目,有那么一些疑惑。
虽然我知道main.js是入口文件,但我不知道它怎么关联index.html。 我以为index.html 会有Import xx from ./main?
亦或者 不过好像并没有这些痕迹。

所以有人能解释一下吗?

反了吧,既然main.js是入口,那么main.js应该import xx from ./index

假如main有import index 那也没用啊 渲染不出来。 可是 main也没有 import ./index

不清楚你们项目结构,脚手架自动创建的项目,有App.vue和main.js,main.js里面需要import App from “./App.vue” ,创建Vue实例的时候,挂载到App.vue中的#app就可以渲染了

一般我们的网站都是单页面应用,即项目中只有一个 index.html 。那我们的写的组件啊,自定义的 js , 如何在 index.html 中引入呢?

这就引出了另外一个东西: 构建工具

当下最热门的构建工具无非就是 webpack。不知道的同学可以自行去看中文官方文档,指南中说的很清楚。

没错,我们写的所有的 js,组件,都是通过构建工具打包成一个独立的 js 文件,例如打包后的 js 文件名为 app.bundle.js 。然后,你再把这个 js 文件在 index.html 引入一下就可以使用了:

...
<body>
  <div id="app"></div>
  <script src="./dist/app.bundle.js"></script>
</body>
...

手动引入不太方便,所以 webpack 官方提供了一个插件 HtmlWebpackPlugin 自动帮你加载构建后的脚本。

希望能帮到你~ 微笑!

5 Likes

脚手架工具(比如 vue-cli)和构建工具(比如 Webpack)掩盖了很多细节。

实际上 vue-cli 出来的项目都在某个角落隐藏着一个 index.html(有形或无形)。如果你用最新版的 vue-cli 创建新项目,这个文件位于 public 目录下。而这个文件实际上是一个模板(EJS 语法),Webpack 会在每次打包后将 entry 文件的路径写入这个模板指定的位置并生成一个新的 index.html 放到 dist 目录(这个行为本身是在 Webpack 配置中定义的,不是 Webpack 的默认行为)。实际上 main.js 也是关联了 index.html 的,只不过这个关联 Webpack 帮你做了。

1 Like

vue-cli 实质是封装了很多配置的webpack项目
webpack是用来做前端项目打包以及编译功能,类似与后端的maven.
至于入口JS是怎么引入的,就要看webpack的插件之一,html-webpack-plug
这个插件的功能就是来处理html页面,并按照配置引入编译后的js 以及CSS.
在项目目录build下有一个名称为webpack.dev.config.js
这个就是我们的用于开发环境的webpack的配置文件

const baseWebpackConfig = require(’./webpack.base.conf’);
const CopyWebpackPlugin = require(‘copy-webpack-plugin’);
const HtmlWebpackPlugin = require(‘html-webpack-plugin’);
const FriendlyErrorsPlugin = require(‘friendly-errors-webpack-plugin’);
const portfinder = require(‘portfinder’);

这里有一句 const HtmlWebpackPlugin=require(‘html-webpack-plugin’)这一句就是在webpack中引入html文件的处理插件
用法如下:

new HtmlWebpackPlugin({
filename: ‘index.html’,
template: ‘index.html’,
inject: true
}),

这一句就是html-webpack-plugin 插件的配置,其中filename就是输出名称,template就是你的源html文件,这里面还有一个参数,这没有标明,他是chunk,这个参数如不写,则默认把所有的output;内输出的JS文件全部引入
vue-cli引入js大概就会这个流程,如果楼主需要详细的了解,还请多学习下wbepack npm 的相关知识

2 Likes

帮我做的无影无踪的感觉 论答案还是老哥你的稳

构建工具(webpack,glup等),可以看做是一个平台,npm 包可以说是他提供的功能,而有的功能就可以将输出的信息填充到 index.html 中,cli 采用了这个功能,并且包装了一番,所以你只需要build 即可
同样地,你自己也可以在基于构建工具上写出调用相关联的代码

老哥稳,受教了。感谢