2. 程式人生 > 實用技巧 >Vue CLI配置

Vue CLI配置

阿新 • • 發佈：2020-11-16

轉載自:https://cli.vuejs.org/zh/config/

#全域性 CLI 配置

有些針對 @vue/cli 的全域性配置，例如你慣用的包管理器和你本地儲存的 preset，都儲存在 home 目錄下一個名叫 .vuerc 的 JSON 檔案。你可以用編輯器直接編輯這個檔案來更改已儲存的選項。

你也可以使用 vue config 命令來審查或修改全域性的 CLI 配置。

#目標瀏覽器

請查閱指南中的瀏覽器相容性章節。

#vue.config.js

vue.config.js 是一個可選的配置檔案，如果專案的 (和 package.json 同級的) 根目錄中存在這個檔案，那麼它會被 @vue/cli-service

自動載入。你也可以使用 package.json 中的 vue 欄位，但是注意這種寫法需要你嚴格遵照 JSON 的格式來寫。

這個檔案應該匯出一個包含了選項的物件：

// vue.config.js
module.exports = {
  // 選項...
}

#baseUrl

從 Vue CLI 3.3 起已棄用，請使用publicPath。

#publicPath

  • Type: string

  • Default: '/'

    部署應用包時的基本 URL。用法和 webpack 本身的 output.publicPath 一致，但是 Vue CLI 在一些其他地方也需要用到這個值，所以請始終使用 publicPath

    而不要直接修改 webpack 的 output.publicPath。

    預設情況下，Vue CLI 會假設你的應用是被部署在一個域名的根路徑上，例如 https://www.my-app.com/。如果應用被部署在一個子路徑上，你就需要用這個選項指定這個子路徑。例如，如果你的應用被部署在 https://www.my-app.com/my-app/，則設定 publicPath 為 /my-app/。

    這個值也可以被設定為空字串 ('') 或是相對路徑 ('./')，這樣所有的資源都會被連結為相對路徑，這樣打出來的包可以被部署在任意路徑，也可以用在類似 Cordova hybrid 應用的檔案系統中。

    相對 publicPath 的限制

    相對路徑的 publicPath 有一些使用上的限制。在以下情況下，應當避免使用相對 publicPath:

    • 當使用基於 HTML5 history.pushState 的路由時；
    • 當使用 pages 選項構建多頁面應用時。

    這個值在開發環境下同樣生效。如果你想把開發伺服器架設在根路徑，你可以使用一個條件式的值：

    module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/production-sub-path/'
    : '/'
}

#outputDir

  • Type: string

  • Default: 'dist'

    當執行 vue-cli-service build 時生成的生產環境構建檔案的目錄。注意目標目錄在構建之前會被清除 (構建時傳入 --no-clean 可關閉該行為)。

    提示

    請始終使用 outputDir 而不要修改 webpack 的 output.path。

#assetsDir

  • Type: string

  • Default: ''

    放置生成的靜態資源 (js、css、img、fonts) 的 (相對於 outputDir 的) 目錄。

    提示

    從生成的資源覆寫 filename 或 chunkFilename 時，assetsDir 會被忽略。

#indexPath

  • Type: string

  • Default: 'index.html'

    指定生成的 index.html 的輸出路徑 (相對於 outputDir)。也可以是一個絕對路徑。

#filenameHashing

  • Type: boolean

  • Default: true

    預設情況下，生成的靜態資源在它們的檔名中包含了 hash 以便更好的控制快取。然而，這也要求 index 的 HTML 是被 Vue CLI 自動生成的。如果你無法使用 Vue CLI 生成的 index HTML，你可以通過將這個選項設為 false 來關閉檔名雜湊。

#pages

  • Type: Object

  • Default: undefined

    在 multi-page 模式下構建應用。每個“page”應該有一個對應的 JavaScript 入口檔案。其值應該是一個物件，物件的 key 是入口的名字，value 是：

    • 一個指定了 entry, template, filename, title 和 chunks 的物件 (除了 entry 之外都是可選的)；
    • 或一個指定其 entry 的字串。
    module.exports = {
  pages: {
    index: {
      // page 的入口
      entry: 'src/index/main.js',
      // 模板來源
      template: 'public/index.html',
      // 在 dist/index.html 的輸出
      filename: 'index.html',
      // 當使用 title 選項時，
      // template 中的 title 標籤需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'Index Page',
      // 在這個頁面中包含的塊，預設情況下會包含
      // 提取出來的通用 chunk 和 vendor chunk。
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    // 當使用只有入口的字串格式時，
    // 模板會被推導為 `public/subpage.html`
    // 並且如果找不到的話，就回退到 `public/index.html`。
    // 輸出檔名會被推導為 `subpage.html`。
    subpage: 'src/subpage/main.js'
  }
}

    提示

    當在 multi-page 模式下構建時，webpack 配置會包含不一樣的外掛 (這時會存在多個 html-webpack-plugin 和 preload-webpack-plugin 的例項)。如果你試圖修改這些外掛的選項，請確認執行 vue inspect。

#lintOnSave

  • Type: boolean | 'warning' | 'default' | 'error'

  • Default: 'default'

    是否在開發環境下通過 eslint-loader 在每次儲存時 lint 程式碼。這個值會在 @vue/cli-plugin-eslint 被安裝之後生效。

    設定為 true 或 'warning' 時，eslint-loader 會將 lint 錯誤輸出為編譯警告。預設情況下，警告僅僅會被輸出到命令列，且不會使得編譯失敗。

    如果你希望讓 lint 錯誤在開發時直接顯示在瀏覽器中，你可以使用 lintOnSave: 'default'。這會強制 eslint-loader 將 lint 錯誤輸出為編譯錯誤，同時也意味著 lint 錯誤將會導致編譯失敗。

    設定為 error 將會使得 eslint-loader 把 lint 警告也輸出為編譯錯誤，這意味著 lint 警告將會導致編譯失敗。

    或者，你也可以通過設定讓瀏覽器 overlay 同時顯示警告和錯誤：

    // vue.config.js
module.exports = {
  devServer: {
    overlay: {
      warnings: true,
      errors: true
    }
  }
}

    當 lintOnSave 是一個 truthy 的值時，eslint-loader 在開發和生產構建下都會被啟用。如果你想要在生產構建時禁用 eslint-loader，你可以用如下配置：

    // vue.config.js
module.exports = {
  lintOnSave: process.env.NODE_ENV !== 'production'
}

#runtimeCompiler

  • Type: boolean

  • Default: false

    是否使用包含執行時編譯器的 Vue 構建版本。設定為 true 後你就可以在 Vue 元件中使用 template 選項了，但是這會讓你的應用額外增加 10kb 左右。

    更多細節可查閱：Runtime + Compiler vs. Runtime only。

#transpileDependencies

  • Type: Array<string | RegExp>

  • Default: []

    預設情況下 babel-loader 會忽略所有 node_modules 中的檔案。如果你想要通過 Babel 顯式轉譯一個依賴，可以在這個選項中列出來。

#productionSourceMap

  • Type: boolean

  • Default: true

    如果你不需要生產環境的 source map，可以將其設定為 false 以加速生產環境構建。

#crossorigin

  • Type: string

  • Default: undefined

    設定生成的 HTML 中 <link rel="stylesheet"> 和 <script> 標籤的 crossorigin 屬性。

    需要注意的是該選項僅影響由 html-webpack-plugin 在構建時注入的標籤 - 直接寫在模版 (public/index.html) 中的標籤不受影響。

    更多細節可查閱: CORS settings attributes

#integrity

  • Type: boolean

  • Default: false

    在生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 標籤上啟用 Subresource Integrity (SRI)。如果你構建後的檔案是部署在 CDN 上的，啟用該選項可以提供額外的安全性。

    需要注意的是該選項僅影響由 html-webpack-plugin 在構建時注入的標籤 - 直接寫在模版 (public/index.html) 中的標籤不受影響。

    另外，當啟用 SRI 時，preload resource hints 會被禁用，因為 Chrome 的一個 bug 會導致檔案被下載兩次。

#configureWebpack

  • Type: Object | Function

    如果這個值是一個物件，則會通過 webpack-merge 合併到最終的配置中。

    如果這個值是一個函式，則會接收被解析的配置作為引數。該函式既可以修改配置並不返回任何東西，也可以返回一個被克隆或合併過的配置版本。

    更多細節可查閱：配合 webpack > 簡單的配置方式

#chainWebpack

  • Type: Function

    是一個函式，會接收一個基於 webpack-chain 的 ChainableConfig 例項。允許對內部的 webpack 配置進行更細粒度的修改。

    更多細節可查閱：配合 webpack > 鏈式操作

#css.modules

從 v4 起已棄用，請使用css.requireModuleExtension。 在 v3 中，這個選項含義與 css.requireModuleExtension 相反。

#css.requireModuleExtension

  • Type: boolean

  • Default: true

    預設情況下，只有 *.module.[ext] 結尾的檔案才會被視作 CSS Modules 模組。設定為 false 後你就可以去掉檔名中的 .module 並將所有的 *.(css|scss|sass|less|styl(us)?) 檔案視為 CSS Modules 模組。

    提示

    如果你在 css.loaderOptions.css 裡配置了自定義的 CSS Module 選項，則 css.requireModuleExtension 必須被顯式地指定為 true 或者 false，否則我們無法確定你是否希望將這些自定義配置應用到所有 CSS 檔案中。

    更多細節可查閱：配合 CSS > CSS Modules

#css.extract

  • Type: boolean | Object

  • Default: 生產環境下是 true，開發環境下是 false

    是否將元件中的 CSS 提取至一個獨立的 CSS 檔案中 (而不是動態注入到 JavaScript 中的 inline 程式碼)。

    同樣當構建 Web Components 元件時它總是會被禁用 (樣式是 inline 的並注入到了 shadowRoot 中)。

    當作為一個庫構建時，你也可以將其設定為 false 免得使用者自己匯入 CSS。

    提取 CSS 在開發環境模式下是預設不開啟的，因為它和 CSS 熱過載不相容。然而，你仍然可以將這個值顯性地設定為 true 在所有情況下都強制提取。

#css.sourceMap

  • Type: boolean

  • Default: false

    是否為 CSS 開啟 source map。設定為 true 之後可能會影響構建的效能。

#css.loaderOptions

  • Type: Object

  • Default: {}

    向 CSS 相關的 loader 傳遞選項。例如：

    module.exports = {
  css: {
    loaderOptions: {
      css: {
        // 這裡的選項會傳遞給 css-loader
      },
      postcss: {
        // 這裡的選項會傳遞給 postcss-loader
      }
    }
  }
}

    支援的 loader 有：

    另外，也可以使用 scss 選項，針對 scss 語法進行單獨配置（區別於 sass 語法）。

    更多細節可查閱：向前處理器 Loader 傳遞選項

    提示

    相比於使用 chainWebpack 手動指定 loader 更推薦上面這樣做，因為這些選項需要應用在使用了相應 loader 的多個地方。

#devServer

  • Type: Object

    所有 webpack-dev-server 的選項都支援。注意：

    • 有些值像 host、port 和 https 可能會被命令列引數覆寫。
    • 有些值像 publicPath 和 historyApiFallback 不應該被修改，因為它們需要和開發伺服器的 publicPath 同步以保障正常的工作。

#devServer.proxy

  • Type: string | Object

    如果你的前端應用和後端 API 伺服器沒有執行在同一個主機上，你需要在開發環境下將 API 請求代理到 API 伺服器。這個問題可以通過 vue.config.js 中的 devServer.proxy 選項來配置。

    devServer.proxy 可以是一個指向開發環境 API 伺服器的字串：

    module.exports = {
  devServer: {
    proxy: 'http://localhost:4000'
  }
}

    這會告訴開發伺服器將任何未知請求 (沒有匹配到靜態檔案的請求) 代理到http://localhost:4000。

    如果你想要更多的代理控制行為，也可以使用一個 path: options 成對的物件。完整的選項可以查閱 http-proxy-middleware 。

    module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: '<url>',
        ws: true,
        changeOrigin: true
      },
      '/foo': {
        target: '<other_url>'
      }
    }
  }
}

#parallel

  • Type: boolean

  • Default: require('os').cpus().length > 1

    是否為 Babel 或 TypeScript 使用 thread-loader。該選項在系統的 CPU 有多於一個核心時自動啟用，僅作用於生產構建。

#pwa

#pluginOptions

  • Type: Object

    這是一個不進行任何 schema 驗證的物件，因此它可以用來傳遞任何第三方外掛選項。例如：

    module.exports = {
  pluginOptions: {
    foo: {
      // 外掛可以作為 `options.pluginOptions.foo` 訪問這些選項。
    }
  }
}

#Babel

Babel 可以通過 babel.config.js 進行配置。

提示

Vue CLI 使用了 Babel 7 中的新配置格式 babel.config.js。和 .babelrc 或 package.json 中的 babel 欄位不同，這個配置檔案不會使用基於檔案位置的方案，而是會一致地運用到專案根目錄以下的所有檔案，包括 node_modules 內部的依賴。我們推薦在 Vue CLI 專案中始終使用 babel.config.js 取代其它格式。

所有的 Vue CLI 應用都使用 @vue/babel-preset-app，它包含了 babel-preset-env、JSX 支援以及為最小化包體積優化過的配置。通過它的文件可以查閱到更多細節和 preset 選項。

同時查閱指南中的 Polyfill 章節。

#ESLint

ESLint 可以通過 .eslintrc 或 package.json 中的 eslintConfig 欄位來配置。

更多細節可查閱 @vue/cli-plugin-eslint。

#TypeScript

TypeScript 可以通過 tsconfig.json 來配置。

更多細節可查閱 @vue/cli-plugin-typescript。

#單元測試

#Jest

更多細節可查閱 @vue/cli-plugin-unit-jest。

#Mocha (配合 mocha-webpack)

更多細節可查閱 @vue/cli-plugin-unit-mocha。

#E2E 測試

#Cypress

更多細節可查閱 @vue/cli-plugin-e2e-cypress。

#Nightwatch

更多細節可查閱 @vue/cli-plugin-e2e-nightwatch。

相關推薦

Vue CLI配置

轉載自:https://cli.vuejs.org/zh/config/ #全域性 CLI 配置 有些針對 @vue/cli 的全域性配置，例如你慣用的包管理器和你本地儲存的 preset，都儲存在 home 目錄下一個名叫 .vuerc 的 JSON 檔案。你可以用編輯器直接

Vue-Cli 配置 axios，建立axios例項

安裝axios npm install axios -D 建立axios例項 在src下建立api資料夾並建立http.js、interFace.js

vue-cli配置使用Vuex的全過程記錄

目錄前言安裝使用模組化管理x狀態持久化總結前言     在vue開發用我們常常會用到一些全域性的資料，比如使用者資訊、使用者許可權、一些狀態等等。我們傳統的資料都是單向的，所以我們得一

vue vue-cli配置檔案 config

檔案目錄 index.js dev.env.js prod.env.js index.js 配置註釋 \"use strict\"; // Template version: 1.3.1

Vue學習之vue-cli腳手架下載安裝及配置

　　1. 先下載node.js，下載地址：https://nodejs.org/en/download/ 　　　　 　　　　找個目錄儲存，解壓下載的檔案，然後配置環境變數，將下面的路徑配置到環境變數中。

vue-cli 2.x和3.x配置移動端適配px自動轉為rem

移動端適配一直都是個大問題，現在也出現了各種各樣的解決方案，比如 rem, vw 百分比等，但是比較成熟的切比較容易編寫的還是 rem，他是相對於根元素的 font-size 進行等比例計算的。

Vue-cli腳手架 安裝配置及建立

Vue 安裝及配置 #1 安裝node，官網下載 node -v v10.16.3 #2 安裝模組 npm install 模組名 #npm比較慢，用淘寶的cnpm來替換npm

vue-cli腳手架build目錄中的webpack.base.conf.js配置檔案

此文章用來解釋vue-cli腳手架build目錄中的webpack.base.conf.js配置檔案 此配置檔案是vue開發環境的wepack相關配置檔案，主要用來處理各種檔案的配置

Vue之腳手架vue-cli相關配置

現在前端工程化開發是現在的一個流程趨勢，藉助一些工具幫助我們搭建一個舒適的開發環境，已經被提上日程

vue cli 3.0通用打包配置程式碼,不分一二級目錄

1.專案根目錄下新建vue.config.js，進行如下配置即可 module.exports={ publicPath:\'\',};

在 WebStorm 中，配置能夠識別 Vue CLI 3 建立的專案的別名 alias

我們使用 Webpack 經常會配置一些別名 alias 指向特定的目錄，這樣在使用 import 等語句時就不用寫一大堆的相對路徑了，常見的是將專案的 src 設定為 @，比如某檔案的路徑是 src/libs/util.js，配置後，任何地方就

vue-cli style-resources-loader 配置

1. 外掛安裝 前提：附屬外掛安裝 確保已安裝less、less-loader less官方安裝及使用文件：https://www.npmjs.com/package/less

Vue筆記：安裝配置node.js及使用vue-cli建立專案

Node.js安裝配置 安裝配置教程：https://www.cnblogs.com/aizai846/p/11441693.html 注意：使用npm下載包的時候配置代理

vue-cli專案中安裝配置stylus-loader（vue-cli2）

安裝stylus stylus-loader npm install stylus [email protected] --save-dev 　配置webpack.base.config.js

vue-cli專案中生成免打包的配置檔案，直接在配置檔案中修改url地址重新整理頁面即可更改請求域名地址，不需重新打包

需求： 在打包成功之後在dist中會生成一個配置檔案，配置檔案中包含要請求的地址，通過直接修改配置檔案中的地址即可成功修改請求地址，不需要再重新打包。

vue-cli 3.x 多頁面配置

一、前言 1. 單頁面（SPA Single-Page-Application） （1）入口：單頁面只是一張 Web 頁面的模式，只有一個 html 檔案，整個專案只有一個入口檔案。

使用vue-cli腳手架工具搭建vue工程專案以及配置路由

vue-cli是用node編寫的命令列工具，我們需要進行全域性安裝。開啟命令列終端，輸入如下命令：

Vue 3 使用vue-cli 4.x安裝AntD 2.x，並配置axios及使用代理解決跨域問題

1. 安裝腳手架工具 $ npm install -g @vue/cli 2. 建立一個專案 vue create antd-demo 這裡腳手架會自動建立檔案目錄。

vue-cli-service build 不同環境配置

背景 在專案部署時，我們需要在測試環境和生產環境使用不同的變數。 vue-cli提供了vue-cli-service build打包命令，然而vue-cli-service build預設的環境變數值則為production。那我們通過npm run build打包構建，想

在webpack中配置類似vue-cli的public的靜態資料夾（vue中巢狀iframe）

技術標籤：vue 近期有個變態的需求，要求在vue中巢狀iframe 而如果在vue-cli腳手架配置的專案的話就比較簡單，直接在public中或者在static靜態資料夾下新增html檔案，相對定位引入就行了 如：