在Vue项目中如何修改`vue.config.js`来处理不同环境下的特定需求？

在Vue项目中，`vue.config.js`文件是一个可选的配置文件，如果项目根目录下存在这个文件，则会被自动加载。通过修改`vue.config.js`文件，我们可以定制多种开发和生产环境下的构建行为，比如代理API请求、设置公共路径、配置打包文件的输出目录等。以下是几种常见的使用场景：

1. 修改输出目录：

module.exports = {
  outputDir: 'dist' // 指定输出目录为项目根目录下的dist文件夹
}

2. 修改静态资源目录：

module.exports = {
  assetsDir: 'static' // 指定静态资源目录为static文件夹
}

3. 修改基本URL：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' 
    ? '/production-sub-path/' 
    : '/' // 在生产环境下使用子路径，在开发环境下使用根路径
}

4. 跨域代理设置：

module.exports = {
  devServer: {
    proxy: 'http://localhost:4000' // 设置代理，将特定请求转发到http://localhost:4000
  }
}

5. 使用环境变量：

module.exports = {
  // 在config/index.js中通过process.env.VUE_APP_>变量访问
  // 在应用代码中通过process.env.VUE_APP_>变量访问
  // 如在public/index.html中使用：
  // <title>%VUE_APP_TITLE%</title>
  publicPath: process.env.VUE_APP_PUBLIC_PATH
}

6. 禁用文件名哈希：

module.exports = {
  filenameHashing: false // 禁用生成的静态文件名的哈希后缀
}