vue如何在vue.config.js文件中導(dǎo)入模塊

更新時(shí)間：2024年07月05日 11:13:21 作者：花間半盤棋

這篇文章主要介紹了vue如何在vue.config.js文件中導(dǎo)入模塊問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

在vue.config.js文件中導(dǎo)入模塊

由于 vue.config.js 是在構(gòu)建項(xiàng)目時(shí)由 Webpack 讀取的 Node.js 腳本文件，

而 Node.js 的import 語法只在 ES 模塊中有效，

所以在 vue.config.js 中不能直接使用 import 來導(dǎo)入模塊，

可以使用 CommonJS 的 require 來導(dǎo)入模塊，如下：

// vue.config.js
const constant = require('./src/utils/constant')
console.log(constant.BASE_URL);

相對(duì)應(yīng)的導(dǎo)出模塊的寫法應(yīng)當(dāng)是：

const BASE_URL = 'xxx' 
// constant.js
exports.BASE_URL = BASE_URL

vue項(xiàng)目中vue.config.js文件介紹

vue.config.js 是一個(gè)可選的配置文件，如果項(xiàng)目的根目錄中沒有這個(gè)文件，則 Vue CLI 會(huì)使用默認(rèn)的配置。

這個(gè)文件的主要目的是為了讓開發(fā)者能夠調(diào)整 Vue CLI 生成的項(xiàng)目的默認(rèn)配置。

vue.config.js 應(yīng)該導(dǎo)出一個(gè)包含了配置選項(xiàng)的對(duì)象。

這些配置選項(xiàng)包括但不限于：

publicPath：指定部署應(yīng)用時(shí)的基本 URL。
outputDir：指定輸出目錄（dist）。
assetsDir：指定除 index.html 以外的靜態(tài)資源目錄（相對(duì)于 outputDir）。
indexPath：指定生成的 index.html 的輸出路徑（相對(duì)于 outputDir）。
lintOnSave：是否在保存的時(shí)候檢查并修復(fù) lint 錯(cuò)誤。
chainWebpack：一個(gè)高級(jí)選項(xiàng)，允許你使用 webpack-chain 進(jìn)行更細(xì)粒度的修改。
configureWebpack：如果項(xiàng)目的 webpack 配置需要進(jìn)行更細(xì)粒度的修改，則使用這個(gè)函數(shù)。
devServer：修改 webpack-dev-server 配置。
css、parallel、pluginOptions 等其他配置。

這個(gè)文件通常位于項(xiàng)目的根目錄下，與 package.json 文件同級(jí)。

它使得開發(fā)者能夠靈活地定制 Vue CLI 生成的項(xiàng)目，以滿足特定的項(xiàng)目需求或工作流程。

例如，你可以通過 vue.config.js 文件來修改項(xiàng)目的輸出目錄，或者調(diào)整 webpack-dev-server 的配置，以便在開發(fā)過程中使用特定的代理設(shè)置或端口號(hào)。

// vue.config.js
module.exports = {
outputDir: 'dist-custom', // 修改輸出目錄
devServer: {
port: 8080, // 修改開發(fā)服務(wù)器端口
proxy: {
'/api': {
target: 'http://example.com', // 設(shè)置代理
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
}

在這個(gè)例子中，vue.config.js 文件修改了項(xiàng)目的輸出目錄為 dist-custom，并將開發(fā)服務(wù)器的端口設(shè)置為 8080。

同時(shí)，它還設(shè)置了一個(gè)代理，將所有以 /api 開頭的請(qǐng)求代理到 http://example.com。