Vue-cli是一個(gè)使用命令行工具創(chuàng)建Vue項(xiàng)目的腳手架，Vue-cli提供了一個(gè)配置文件，可以用來自定義Vue項(xiàng)目的一些配置，這個(gè)配置文件就是vue.config.js，本文將詳細(xì)講解如何使用vue.config.js來自定義Vue項(xiàng)目配置。

配置文件的位置

├── node_modules
├── public
├── src
├── vue.config.js
├── package.json

配置文件的基本格式

module.exports = {
// 配置項(xiàng)
}

常用的配置項(xiàng)

• publicPath：靜態(tài)資源的公共路徑，可用于設(shè)置CDN地址
• outputDir：打包生成的目錄
• indexPath: 打包生成的index.html文件的路徑，默認(rèn)是outputDir/index.html
• devServer: 開發(fā)服務(wù)器的配置，常用于設(shè)置代理，跨域請(qǐng)求等
• configureWebpack: 修改webpack配置項(xiàng)，使用webpack-merge合并最終配置項(xiàng)
• chainWebpack: 通過鏈?zhǔn)秸{(diào)用修改webpack配置項(xiàng)
• css: 配置CSS的相關(guān)選項(xiàng)，常用于自定義CSS loader
• lintOnSave: 是否開啟ESLint校驗(yàn)，如果要開啟需要安裝@vue/cli-plugin-eslint插件

讓我們來舉個(gè)例子：

module.exports = {
publicPath: '/my-app',
outputDir: 'dist',
indexPath: 'index.html',
devServer: {
proxy: 'http://api.example.com'
},
configureWebpack: {
plugins: [
new MyPlugin()
]
},
chainWebpack: config =>{
config.plugin('my-plugin')
.use(MyPlugin, [
{ options: true }
])
},
css: {
loaderOptions: {
sass: {
additionalData: `@import "@/styles/variables.scss";`
}
}
},
lintOnSave: true
}

以上是vue.config.js的基本介紹和常用配置項(xiàng)的說明，如果想要更加深入了解Vue項(xiàng)目的配置，請(qǐng)自行查看Vue-cli的官方文檔。