vue-cli中js是怎样引入html的？_vue-cli 不支持 ejs 引入 html

作者：繁依Fanyi0 | 2024-05-18 16:19:42

踩

vue-cli 不支持 ejs 引入 html

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>1
2
3
4
5
6
7
8
9

那到底是怎么引入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"
},1
2
3
4
5

执行命令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')1
2
3
4
5
6
7
8
9

它引入了很多插件，这里我们不管其他的，只看两个，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'
  },1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

入口文件指向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 }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

这里绑定了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,1
2
3
4
5
6

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/589084