vue-cli是怎么通过webpack把js文件引入index.html的过程呢？
vue新手在用vue-cli写项目时候会发现，项目目录下index.html并没有通过标签引入任何js。index.html如下：

<!DOCTYPE html>
<head>
</meta charsets="utf-8">
</meta name='viewport' content='width=device-width,user-scalable=no,scalable=1.0'>
<head>
<body>
  <div id="app"></div>
<body>
</html>

那到底是怎么引入js的呢？首先打开package.json,找到script

"scripts": {
  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  "start": "npm run dev",
  "build": "node build/build.js"
},

执行命令npm run dev ，这时你会看到你创建的vue项目启动起来，所以我们一步步看，执行这个命令，需要找到webpack.dev.conf.js”这个文件，打开它
我们看到

'use strict'
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const portfinder = require('portfinder')

它引入了很多插件，这里我们不管其他的，只看两个，webpack.base.conf ;html-webpack-plugin
打开webpack.base.conf.js，我们看到

'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },

入口文件指向main.js，打开main.js,如下

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import store from "./store"
import echarts from 'echarts'

Vue.config.productionTip = false
Vue.prototype.$echarts = echarts 
Vue.use(ElementUI)


/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App }
})

这里绑定了id为app的元素，然后我们打开第二个文件html-webpack-plugin，这个plugin是帮做我们配置html文件中js文件的引入的，有了这个plugin我们就不用再用在html中加入标签这么傻的方式引入js文件了在node-modules中，打开index.js

function HtmlWebpackPlugin (options) {
  // Default options
  this.options = _.extend({
    template: path.join(__dirname, 'default_index.ejs'),
    filename: 'index.html',
    hash: false,

我们发现这不是有index.html吗，所以通过一系列复杂的关系我们得出：启动命令后，通过webpack的文件决定main.js作为app的入口，将main.js通过id绑定在index.html上

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue