vue.config.js配置參考（2024-05-20）

vue.config.js?是一個可選的配置文件，如果項目的 (和?package.json?同級的) 根目錄中存在這個文件，那么它會被?@vue/cli-service?自動加載。

你也可以使用?package.json?中的?vue?字段，但是注意這種寫法需要你嚴格遵照 JSON 的格式來寫。

這個文件應該導出一個包含了選項的對象：

// vue.config.js/*** @type {import('@vue/cli-service').ProjectOptions}*/
module.exports = {// 選項...
}

或者，你也可以使用?@vue/cli-service?提供的?defineConfig?幫手函數，以獲得更好的類型提示：

// vue.config.js
const { defineConfig } = require('@vue/cli-service')module.exports = defineConfig({// 選項
})

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 左右。

transpileDependencies

  • Type:?boolean | Array<string | RegExp>

  • Default:?false

    默認情況下?babel-loader?會忽略所有?node_modules?中的文件。你可以啟用本選項，以避免構建后的代碼中出現未轉譯的第三方依賴。

    不過，對所有的依賴都進行轉譯可能會降低構建速度。如果對構建性能有所顧慮，你可以只轉譯部分特定的依賴：給本選項傳一個數組，列出需要轉譯的第三方包包名或正則表達式即可。

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) 中的標簽不受影響。

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?合并到最終的配置中。

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

chainWebpack

  • Type:?Function

    是一個函數，會接收一個基于?webpack-chain?的?ChainableConfig?實例。允許對內部的 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.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 有：

    • css-loader
    • postcss-loader
    • sass-loader
    • less-loader
    • stylus-loader

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

    提示

    相比于使用?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?成對的對象。

    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

  • Type:?Object

    向?PWA 插件傳遞選項。

pluginOptions

  • Type:?Object

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

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

Babel

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

TIP

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 支持以及為最小化包體積優化過的配置。

ESLint

ESLint 可以通過?.eslintrc?或?package.json?中的?eslintConfig?字段來配置。

TypeScript

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

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/bicheng/17234.shtml
繁體地址，請注明出處：http://hk.pswp.cn/bicheng/17234.shtml
英文地址，請注明出處：http://en.pswp.cn/bicheng/17234.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

綜合布線管理軟件有何作用？

綜合布線管理軟件有何作用？

當客戶問及“綜合布線管理軟件究竟有何作用&#xff1f;” 我們通常這樣回答&#xff1a; 綜合布線管理軟件&#xff0c;作為運維管理的得力助手&#xff0c;其核心功能旨在確保布線系統的穩定運行與快速響應。 首先&#xff0c;這款軟件通過構建標準化的運維管理流程&#…
閱讀更多...
Qt for Android

Qt for Android

文章 USB Qt for android 獲取USB設備列表&#xff08;一&#xff09;Java方式 獲取 Qt for android 獲取USB設備列表&#xff08;二&#xff09;JNI方式 獲取 Qt for android 串口庫使用 異常處理 Qt for Android 亂碼問題 andoid開發文檔 UsbManager&#xff08;apiref.…
閱讀更多...
四川匯聚榮科技有限公司好不好？

四川匯聚榮科技有限公司好不好？

在當今科技飛速發展的時代&#xff0c;企業要想在激烈的市場競爭中脫穎而出&#xff0c;不僅需要先進的技術支持&#xff0c;還需要優質的服務和良好的口碑。那么&#xff0c;四川匯聚榮科技有限公司是否具備這些條件呢?接下來&#xff0c;我們將從公司實力、服務質量、客戶反…
閱讀更多...
win10換ubuntu

win10換ubuntu

1.首先是格式化windows系統&#xff0c;這里用的是恢復出廠設置 2.然后按照下面教程使用u盤來安裝ubuntuUbuntu 20.04.2.0 LTS 系統安裝過程詳解 &#xff08;從下載鏡像到安裝系統&#xff09;_ubuntu安裝教程20.04-CSDN博客 3.然后下面是一些別的準備工作&#xff1a; 1)安…
閱讀更多...
如何根據系統的業務場景需求定制自己的線程池？

如何根據系統的業務場景需求定制自己的線程池？

如何根據系統的業務場景需求定制自己的線程池？ 1、背景2、生產中應當如何使用線程池才比較合理呢？2.1、指定線程數量2.2、選擇合適的工作隊列2.3、自定義線程工廠2.4、選擇合適的拒絕策略3、自定義線程池代碼案例1、背景 線程池有那么多的參數和類型，在實際的開發中，我們應…
閱讀更多...
達夢授權某個模式給其它用戶只讀權限

達夢授權某個模式給其它用戶只讀權限

為了在生產環境中將SZSJTJFX模式下的所有對象的只讀權限授予XXXX的賬號SZJG_CPZLJD&#xff0c;可以通過以下分批處理的腳本來完成。此腳本會遍歷SZSJTJFX模式下的所有表和視圖&#xff0c;并生成相應的GRANT語句&#xff0c;以避免“過多的對象名前綴”錯誤。 分批處理的動態…
閱讀更多...
Python基礎內容---上萬字總結（回顧自己一年來所有關于python的學習）

Python基礎內容---上萬字總結（回顧自己一年來所有關于python的學習）

Python語言元素之變量 作為一個程序員，可能經常會被外行問到兩個問題，其一是“什么是（計算機）程序”，其二是“寫（計算機）程序能做什么”，這里我先對這兩個問題做一個回答。程序是指令的集合，寫程序就是用指令控制計算機做我們想讓它做的事情。那么，為什么要用Python…
閱讀更多...
Java后端面經

Java后端面經

1.可重復讀&#xff0c;已提交讀&#xff0c;這兩個隔離級別表現的現象是什么&#xff0c;區別是什么樣的&#xff1f; 可重復讀&#xff1a;表示整個事務看到的事務和開啟后的事務能看到的數據是一致的&#xff0c;既然數據是一致的&#xff0c;所以不存在不可重復讀。而且不…
閱讀更多...
kafka調優參考建議 —— 筑夢之路

kafka調優參考建議 —— 筑夢之路

這里主要是從不同使用場景來調優&#xff0c;僅供參考。 吞吐量優先 吞吐量優先使用場景如采集日志。 1. broker配置調優 num.partitions&#xff1a;分區個數&#xff0c;設置為與消費者的線程數基本相等 2. producer配置調優 batch.size 批量提交消息的字節數&#xff0c;…
閱讀更多...
力扣算法之1045. 買下所有產品的客戶

力扣算法之1045. 買下所有產品的客戶

力扣傳送門 題解注釋 Customer表中對應的customer_id對應的product_key去重后要全部存在于Product表中的product_key 我的解 SELECT customer_id FROM Customer GROUP BY customer_id HAVING COUNT(DISTINCT product_key)(SELECT COUNT(DISTINCT product_key) FROM Product…
閱讀更多...
《java數據結構》--順序表詳解

《java數據結構》--順序表詳解

一.順序表的概念&#x1f649; &#x1f431;順序表是一段物理地址連續的儲存單元&#xff0c;一次儲存數據元素的線性結構。一般情況下采用數組儲存&#xff0c;和數組的增刪查改類似。 但是順序表和數組還是有區別的比如&#xff0c;數組按照是否可以擴容可以分為&#xff…
閱讀更多...
duckdb 插件機制研究

duckdb 插件機制研究

本文研究 duckdb 內置的 extensions 工作機制。 插件架構 在 duckdb 源碼內&#xff0c;內置了一組原生插件&#xff0c;位于頂層 extension 目錄下&#xff1a; 除此之外&#xff0c;還支持 Out-of-Tree Extension&#xff0c;簡單說就是獨立的插件&#xff0c;不是集成在源…
閱讀更多...
Star CCM+繪圖顯示設置

Star CCM+繪圖顯示設置

前言 如前文介紹&#xff0c;根據報告創建監視器與繪圖后&#xff0c;在繪圖中會出現報告繪圖。此處可以自定義繪圖的格式&#xff0c;如網格顯示、字體大小、曲線的粗細等。同時也可以根據需要創建右坐標&#xff0c;分別監測不同類型的函數數值。為此方便后期輸出仿真報告。…
閱讀更多...
哆啦AAA萌也能用HTML畫出來？看這里！【完整代碼可運行】

哆啦AAA萌也能用HTML畫出來？看這里！【完整代碼可運行】

關注微信公眾號「ClassmateJie」有完整代碼以及更多驚喜等待你的發現。 簡介/效果展示 你是否曾經想過&#xff0c;那些可愛的哆啦A夢角色是如何被創造出來的呢&#xff1f;今天&#xff0c;我要帶你一起探索一個神奇的秘密——用HTML畫出哆啦A夢&#xff01; 代碼 <!DOCT…
閱讀更多...
【quarkus系列】創建quarkus第一個應用程序

【quarkus系列】創建quarkus第一個應用程序

文章目錄 序言環境準備創建項目項目分析程序代碼構建訪問項目 序言 Quarkus 是一個設計用于 Kubernetes 和云原生環境的 Java 框架&#xff0c;具有快速啟動時間、低內存消耗和強大的開發者體驗。溪源將帶您一步步創建一個簡單的 Quarkus 應用程序。 環境準備 在開始之前&am…
閱讀更多...
Neo4j安裝部署及python連接neo4j操作

Neo4j安裝部署及python連接neo4j操作

Neo4j安裝部署及python連接neo4j操作 Neo4j安裝和環境配置 安裝依賴庫&#xff1a; sudo apt-get install wget curl nano software-properties-common dirmngr apt-transport-https gnupg gnupg2 ca-certificates lsb-release ubuntu-keyring unzip -y 增加Neo4 GPG key&…
閱讀更多...
為什么并行化將會是下一代的區塊鏈解決方案？

為什么并行化將會是下一代的區塊鏈解決方案？

原文標題&#xff1a;《Parallel Execution: The Next Generation of Blockchains》撰文&#xff1a;Paul Timofeev 、Mike Jin、Gabe Tramble 編譯&#xff1a;Chris&#xff0c;Techub News 區塊鏈是虛擬機&#xff0c;一種軟件基礎的計算模型&#xff0c;它運行在任何人都可…
閱讀更多...
DDOS攻擊和DOS攻擊有什么區別？

DDOS攻擊和DOS攻擊有什么區別？

DDOS攻擊的全稱為分布式拒絕服務攻擊&#xff0c;能夠使很多個計算機在同一時間內遭受到攻擊&#xff1b;DOS攻擊的全稱則是拒絕服務攻擊&#xff0c;是攻擊者想辦法讓目標機器停止提供服務&#xff0c;對于DDOS攻擊和DOS攻擊我們經常會混淆&#xff0c;但是兩者之間在性質上還…
閱讀更多...
Pytorch深度學習實踐筆記10（b站劉二大人）

Pytorch深度學習實踐筆記10（b站劉二大人）

&#x1f3ac;個人簡介&#xff1a;一個全棧工程師的升級之路&#xff01; &#x1f4cb;個人專欄&#xff1a;pytorch深度學習 &#x1f380;CSDN主頁 發狂的小花 &#x1f304;人生秘訣&#xff1a;學習的本質就是極致重復! 《PyTorch深度學習實踐》完結合集_嗶哩嗶哩_bilibi…
閱讀更多...
C++的第一道門坎:類與對象（一）

C++的第一道門坎:類與對象（一）

1.面向過程與面向對象 1.1面向過程 我們之前學習的C語言就是一種面向過程的語言&#xff0c;面向過程的語言強調的是具體實現的過程&#xff0c;一般用函數來具體實現。我們用面向過程的思想&#xff0c;就可以把炒菜分為以下幾個步驟: 1.2面向對象 而對于面向對象的語言而言…
閱讀更多...
最新文章

Copyright @ 2022~2023