vue cli中js是怎樣引入html的？

2021-08-15 09:34:11 字數 2089 閱讀 5565

vue-cli是怎麼通過webpack把js檔案引入index.html的過程呢？

vue新手在用vue-cli寫專案時候會發現，專案目錄下index.html並沒有通過標籤引入任何js。index.html如下：



meta


charsets="utf-8">


meta


name='viewport'


content='width=device-width,user-scalable=no,scalable=1.0'>


div>


html>
那到底是怎麼引入js的呢？首先開啟package.json,找到script

"scripts": ,
執行命令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) 


module.exports = ,
入口檔案指向main.js，開啟main.js,如下

import vue from


'vue'


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()
function


htmlwebpackplugin


(options) {


// default options


this.options = _.extend({


template: path.join(__dirname, 'default_index.ejs'),


filename: 'index.html',


hash: false,

Vue 如何在vue cli中建立並引入自定義元件

vue cli中的所有元件都是存放在components資料夾下面的，所以在components資料夾下面建立乙個名為first.vue的自定義元件 template div h1 h1 div template script 1 export 表示匯出,在自定義元件裡面使用export defau...

js中的GO和AO是怎樣產生的

1 建立乙個ao物件 activation object ao 2 將函式內所有的形參和變數宣告 的名 儲存到ao物件中，value為undifined ao3 將形參和實參進行統一。ao4 將所有的函式宣告的函式名作為ao物件中的key,函式整體內容為value儲存到ao物件中 ao,b 3,c ...

JSP頁面中引入js檔案

1 引入的js檔案出錯，檢查方法 將js的內容寫在當前的頁面的之間，看是否能夠正常執行，如果不能，請核查 2 如果引入的 在當前頁面中能夠正常執行，但當引入時不能正常執行，則有兩種可能 a 引入js的路徑有問題 b 引入的js的編碼格式與當前頁面不匹配 3 引入js的路徑問題 js的引入不外乎兩種，...