vue-cli-service的參數(shù)配置過程
vue-cli-service的參數(shù)配置
vue-cli-service serve
Usage: vue-cli-service serve [options]
Options：
--open 服務(wù)器啟動時打開瀏覽器
--copy 將URL復(fù)制到服務(wù)器啟動時的剪貼板 (直接到瀏覽器去粘貼就OK了 http://localhost:8080/)
--mode 指定環(huán)境模式 (默認(rèn): development)
--host host 地址 (default: 0.0.0.0)
--port 端口號 (default: 8080)
--https 使用https (default: false)
vue-cli-service build
Usage: vue-cli-service build [options] [entry|pattern]
Options：
--mode 指定環(huán)境模式 (default: production)
--dest 指定輸出目錄 (default: dist)
--modern 構(gòu)建兩個版本的 js 包：一個面向支持現(xiàn)代瀏覽器的原生 ES2015+ 包，以及一個針對其他舊瀏覽器的包。
--target 允許您以項目庫或Web組件的形式在項目內(nèi)部構(gòu)建任何組件 app | lib | wc | wc-async (default: app) ???
--name lib或者web組件庫的名稱 (default: "name" in package.json or entry filename)
--no-clean 在構(gòu)建項目之前不要刪除輸出目錄(dist)
--report 生成report.html以幫助分析包內(nèi)容
--report-json 生成report.json來幫助分析包內(nèi)容
--watch 監(jiān)聽 - 當(dāng)有改變時 自動重新打包~
vue-cli-service inspect
使用它vue-cli-service inspect來檢查Vue CLI項目中的webpack配置。有關(guān)更多詳細(xì)信息，請參閱檢查Webpack配置
Usage: vue-cli-service inspect [options] [...paths]
Options：
--mode 指定環(huán)境模式 (default: development)
vue-cli中執(zhí)行的vue-cli-service
最近又整回vue去了，不說了，還是腳手架先整吧。
假設(shè)你已經(jīng)通過vue create vue-base
有了vue-base 項目
然后我看到
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
這里執(zhí)行的是vue-cli-service
開心 又來活兒了
我好奇它的webpack基礎(chǔ)配置是什么？就是我本地項目文件不做任何vue.config.js的配置，它能實現(xiàn)什么？
vue-cli-service 其實執(zhí)行的是 node_modules/.bin/vue-cli-service
最終是執(zhí)行了@vue/cli-service
const Service = require('../lib/Service')
const service = new Service(process.env.VUE_CLI_CONTEXT || process.cwd())
這里看到首先去new Service，這里初始化配置
然后執(zhí)行了
service.run(command, args, rawArgv).catch(err => {
error(err)
process.exit(1)
})
run函數(shù)里面先執(zhí)行了this.init 把默認(rèn)配置初始化好
然后執(zhí)行了command 這里以server為例，去執(zhí)行了 lib/commands下面對應(yīng)的serve.js文件
可以看到這里面也有一些配置，覆蓋了之前的初始化的配置
lib/commands/serve.js
const defaults = {
host: '0.0.0.0',
port: 8080,
https: false
}
如何更改vue-cli-service里面默認(rèn)的端口號呢？
把啟動命令更改為vue-cli-service serve --port 7001
后續(xù)可以看到在這里把初始化的很多參數(shù)加到 webpack配置里面來
Service.js文件里面
loadUserOptions 這個方法里面獲取了用戶的vue.config.js命名的文件信息或者是package.json 里面 vue字段的信息
關(guān)于配置 Service.js這里
const { defaults, validate } = require('./options')
options.js
export default {}出來一份配置
說一下這個文件里面引入的@vue/cli-shared-utils 就像一個校驗一樣，這里處理的很棒！
const builtInPlugins = [
'./commands/serve',
'./commands/build',
'./commands/inspect',
'./commands/help',
// config plugins are order sensitive
'./config/base',
'./config/css',
'./config/prod',
'./config/app'
].map(idToPlugin)
if (inlinePlugins) {
plugins = useBuiltIn !== false
? builtInPlugins.concat(inlinePlugins)
: inlinePlugins
} else {
const projectPlugins = Object.keys(this.pkg.devDependencies || {})
.concat(Object.keys(this.pkg.dependencies || {}))
.filter(isPlugin)
.map(id => {
if (
this.pkg.optionalDependencies &&
id in this.pkg.optionalDependencies
) {
let apply = () => {}
try {
apply = require(id)
} catch (e) {
warn(`Optional dependency ${id} is not installed.`)
}
return { id, apply }
} else {
return idToPlugin(id)
}
})
plugins = builtInPlugins.concat(projectPlugins)
}
里面有一個這個對象，配置各個命令和配置，看起來是做了prod和base的區(qū)分配置 后面是做了一個合并
prod.js里面看到
首先是通過webpack-chain 鏈接的各個配置
module.exports = (api, options) => {
api.chainWebpack(webpackConfig => {
if (process.env.NODE_ENV === 'production') {
production 環(huán)境
webpackConfig
.mode('production') //瞧這里設(shè)置了mode
.devtool(options.productionSourceMap ? 'source-map' : false)
// keep module.id stable when vendor modules does not change
webpackConfig
.plugin('hash-module-ids')
.use(require('webpack/lib/HashedModuleIdsPlugin'), [{
hashDigest: 'hex'
}])
// disable optimization during tests to speed things up
if (process.env.VUE_CLI_TEST) {
webpackConfig.optimization.minimize(false)
}
}
})
}
在base.js
然后你就看到了這么些的默認(rèn)配置
webpackConfig
.mode('development')
.context(api.service.context)
.entry('app')
.add('./src/main.js')
.end()
.output
.path(api.resolve(options.outputDir))
.filename(isLegacyBundle ? '[name]-legacy.js' : '[name].js')
.publicPath(options.publicPath)
基礎(chǔ)的entry ,output
alias
.set('@', api.resolve('src'))
.set(
'vue$',
options.runtimeCompiler
? 'vue/dist/vue.esm.js'
: 'vue/dist/vue.runtime.esm.js'
)
配置了別名 @指向項目src目錄
以下是在 vue 2的項目中，一旦換成 vue 3的項目就沒了，所以放在了try catch中
這里可以看到對， .vue文件啟用了cache-loader，緩存，啟用了vue-loader 這個來轉(zhuǎn)換vue文件
繼續(xù)往下處理了images、svg、media、fonts文件
很意外的看到了關(guān)于.pug后綴文件的處理,可能是其它包里面的？這里沒有仔細(xì)去看了
最后
增加了terser默認(rèn)的內(nèi)置壓縮工具包,做壓縮
這里的配置有一個terserOptions.js文件
更改的
https://cli.vuejs.org/zh/config/#vue-config-js
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue中利用prop進(jìn)行父子通信時的注意事項總結(jié)
這篇文章主要給大家介紹了關(guān)于vue中利用prop進(jìn)行父子通信時的注意事項,文中通過實例介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-01-01
這篇文章主要介紹了Vue項目啟動提示Cannot GET /問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
vue使用axios實現(xiàn)文件上傳進(jìn)度的實時更新詳解
最近在學(xué)習(xí)axios，然后項目就用到了，所以這篇文章主要給大家介紹了關(guān)于vue中利用axios實現(xiàn)文件上傳進(jìn)度的實時更新的相關(guān)資料，文中先對axios進(jìn)行了簡單的介紹，方法大家理解學(xué)習(xí)，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12
Vue.js 的內(nèi)聯(lián)表達(dá)式非常方便，但它最合適的使用場景是簡單的布爾操作或字符串拼接。如果涉及更復(fù)雜的邏輯，你應(yīng)該使用計算屬性。這篇文章我們將一起學(xué)習(xí)vue.js的計算屬性。什么是計算屬性，為什么要用這東西呢？通過下面這篇文章你將解決這些問題，下面來一起看看吧。2016-09-09
vue3+vite:src使用require動態(tài)導(dǎo)入圖片報錯的最新解決方法
這篇文章主要介紹了vue3+vite:src使用require動態(tài)導(dǎo)入圖片報錯和解決方法,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
Vue 動態(tài)設(shè)置路由參數(shù)的案例分析
這篇文章主要介紹了Vue 動態(tài)設(shè)置路由參數(shù)的案例分析,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2018-04-04
vue 關(guān)閉瀏覽器窗口的時候,清空localStorage的數(shù)據(jù)示例
今天小編就為大家分享一篇vue 關(guān)閉瀏覽器窗口的時候,清空localStorage的數(shù)據(jù)示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Vue中使用Element的Table組件實現(xiàn)嵌套表格
本文主要介紹了Vue中使用Element的Table組件實現(xiàn)嵌套表格,通過type="expand"設(shè)置了一個展開按鈕,點(diǎn)擊該按鈕會顯示與當(dāng)前行關(guān)聯(lián)的子表格內(nèi)容,感興趣的可以了解一下2024-01-01
這篇文章主要介紹了Vue+node實現(xiàn)音頻錄制播放,功能，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-03-03
如何通過Vue自定義指令實現(xiàn)前端埋點(diǎn)詳析
埋點(diǎn)分析是網(wǎng)站分析的一種常用的數(shù)據(jù)采集方法,下面這篇文章主要給大家介紹了關(guān)于如何通過Vue自定義指令實現(xiàn)前端埋點(diǎn)的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07