Vue 项目优化必备：vue.config.js 全面解析与实战指南

以下是 vue.config.js 的所有常见属性，包含每个属性的功能描述：

属性名	作用说明
publicPath	设置应用的基础路径，影响静态资源的引用路径
outputDir	指定构建输出目录，默认为 dist
assetsDir	指定静态资源（JS、CSS、图片等）存放目录
indexPath	指定 index.html 的输出路径
lintOnSave	是否在保存时启用 eslint 代码检查
devServer	配置开发服务器，如端口、代理等
css	CSS 相关配置，如 SCSS 全局变量引入
configureWebpack	直接修改 Webpack 配置
chainWebpack	使用 webpack-chain 方式修改 Webpack 配置
productionSourceMap	是否在 production 模式下生成 .map 文件
parallel	是否启用多进程并行构建，提高构建速度
pluginOptions	传递第三方插件的配置
runtimeCompiler	是否使用 Vue 运行时编译版本
transpileDependencies	转换 node_modules 中的特定依赖

vue.config.js 是 Vue CLI 项目中的一个配置文件，它用于修改 Vue 项目的默认配置。下面我们来详细讲解 vue.config.js 的所有常见属性及其用法，并介绍可能遇到的问题及解决方案。

---

1. publicPath

作用：

配置应用的基础路径（也就是 index.html 中引用的静态资源的前缀路径）。

语法：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/prod/' : '/'
}

常见问题：

• 路径错误，导致资源 404：
  • 解决方案：确保 publicPath 设置正确，通常 production 环境下需要配置为服务器上的子路径，例如 /my-app/。

---

2. outputDir

作用：

指定构建输出目录，默认是 dist。

语法：

module.exports = {
  outputDir: 'my-dist'
}

常见问题：

• 构建后找不到 dist 目录：
  • 解决方案：确认 vue.config.js 中的 outputDir 配置正确，且无误删除。