vue-cli-service的參數配置過程

Posted on by

vue-cli-service的參數配置

vue-cli-service serve

Usage: vue-cli-service serve [options]

Options：

–open 服務器啟動時打開瀏覽器

–copy 將URL復制到服務器啟動時的剪貼板 (直接到瀏覽器去粘貼就OK瞭 http://localhost:8080/)

–mode 指定環境模式 (默認: 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 指定環境模式 (default: production)

–dest 指定輸出目錄 (default: dist)

–modern 構建兩個版本的 js 包：一個面向支持現代瀏覽器的原生 ES2015+ 包，以及一個針對其他舊瀏覽器的包。

–target 允許您以項目庫或Web組件的形式在項目內部構建任何組件 app | lib | wc | wc-async (default: app) ???

–name lib或者web組件庫的名稱 (default: "name" in package.json or entry filename)

–no-clean 在構建項目之前不要刪除輸出目錄(dist)

–report 生成report.html以幫助分析包內容

–report-json 生成report.json來幫助分析包內容

–watch 監聽 – 當有改變時 自動重新打包~

vue-cli-service inspect

使用它vue-cli-service inspect來檢查Vue CLI項目中的webpack配置。有關更多詳細信息，請參閱檢查Webpack配置

Usage: vue-cli-service inspect [options] [...paths]

Options：

–mode 指定環境模式 (default: development)

vue-cli中執行的vue-cli-service

最近又整回vue去瞭，不說瞭，還是腳手架先整吧。

假設你已經通過vue create vue-base

有瞭vue-base 項目

然後我看到

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

這裡執行的是vue-cli-service

開心 又來活兒瞭

我好奇它的webpack基礎配置是什麼？就是我本地項目文件不做任何vue.config.js的配置，它能實現什麼？

vue-cli-service 其實執行的是 node_modules/.bin/vue-cli-service

最終是執行瞭@vue/cli-service

const Service = require('../lib/Service')
const service = new Service(process.env.VUE_CLI_CONTEXT || process.cwd())

這裡看到首先去new Service，這裡初始化配置

然後執行瞭

service.run(command, args, rawArgv).catch(err => {
  error(err)
  process.exit(1)
})

run函數裡面先執行瞭this.init 把默認配置初始化好

然後執行瞭command 這裡以server為例，去執行瞭 lib/commands下面對應的serve.js文件

可以看到這裡面也有一些配置，覆蓋瞭之前的初始化的配置

lib/commands/serve.js

const defaults = {
  host: '0.0.0.0',
  port: 8080,
  https: false
}

如何更改vue-cli-service裡面默認的端口號呢？

把啟動命令更改為vue-cli-service serve –port 7001

後續可以看到在這裡把初始化的很多參數加到 webpack配置裡面來

Service.js文件裡面

loadUserOptions 這個方法裡面獲取瞭用戶的vue.config.js命名的文件信息或者是package.json 裡面 vue字段的信息

關於配置 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的區分配置 後面是做瞭一個合並

prod.js裡面看到

首先是通過webpack-chain 鏈接的各個配置

module.exports = (api, options) => {
  api.chainWebpack(webpackConfig => {
    if (process.env.NODE_ENV === 'production') {
 	 production 環境
      webpackConfig
        .mode('production')   //瞧這裡設置瞭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

然後你就看到瞭這麼些的默認配置

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)

基礎的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 這個來轉換vue文件

繼續往下處理瞭images、svg、media、fonts文件

很意外的看到瞭關於.pug後綴文件的處理,可能是其它包裡面的？這裡沒有仔細去看瞭

最後

增加瞭terser默認的內置壓縮工具包,做壓縮

這裡的配置有一個terserOptions.js文件

更改的

https://cli.vuejs.org/zh/config/#vue-config-js

總結

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：