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

配置文件的位置

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

配置文件的基本格式

module.exports = {
// 配置項
}

常用的配置項

• publicPath：靜態資源的公共路徑，可用于設置CDN地址
• outputDir：打包生成的目錄
• indexPath: 打包生成的index.html文件的路徑，默認是outputDir/index.html
• devServer: 開發服務器的配置，常用于設置代理，跨域請求等
• configureWebpack: 修改webpack配置項，使用webpack-merge合并最終配置項
• chainWebpack: 通過鏈式調用修改webpack配置項
• css: 配置CSS的相關選項，常用于自定義CSS loader
• lintOnSave: 是否開啟ESLint校驗，如果要開啟需要安裝@vue/cli-plugin-eslint插件

讓我們來舉個例子：

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的基本介紹和常用配置項的說明，如果想要更加深入了解Vue項目的配置，請自行查看Vue-cli的官方文檔。