面试题：如何修改 Vue 打包后生成文件的路径？

在 Vue 项目中，打包后生成文件的路径可以通过配置 vue.config.js 文件来修改。以下是一些常见的配置选项：

1. 修改输出目录

默认情况下，Vue 打包后的文件会生成在 dist 目录下。你可以通过 outputDir 选项来修改输出目录。

// vue.config.js
module.exports = {
  outputDir: 'my-dist', // 将打包后的文件输出到 my-dist 目录
};

2. 修改静态资源路径

默认情况下，静态资源（如 JS、CSS、图片等）会被放置在 dist 目录的根目录下。你可以通过 assetsDir 选项来修改静态资源的存放路径。

// vue.config.js
module.exports = {
  assetsDir: 'static', // 将静态资源放置在 dist/static 目录下
};

3. 修改公共路径

默认情况下，Vue 打包后的文件会假设部署在服务器的根路径下。如果你的应用部署在子路径下，可以通过 publicPath 选项来修改公共路径。

// vue.config.js
module.exports = {
  publicPath: '/my-app/', // 假设你的应用部署在 /my-app/ 路径下
};

4. 修改文件名

你可以通过 filenameHashing 选项来控制是否生成带有哈希值的文件名，或者通过 configureWebpack 选项来自定义文件名。

// vue.config.js
module.exports = {
  filenameHashing: false, // 禁用文件名哈希
  configureWebpack: {
    output: {
      filename: 'my-bundle.js', // 自定义输出文件名
      chunkFilename: 'my-chunk.js', // 自定义 chunk 文件名
    },
  },
};

5. 完整示例

以下是一个完整的 vue.config.js 配置示例：

// vue.config.js
module.exports = {
  outputDir: 'my-dist', // 输出目录
  assetsDir: 'static', // 静态资源目录
  publicPath: '/my-app/', // 公共路径
  filenameHashing: false, // 禁用文件名哈希
  configureWebpack: {
    output: {
      filename: 'my-bundle.js', // 自定义输出文件名
      chunkFilename: 'my-chunk.js', // 自定义 chunk 文件名
    },
  },
};

通过这些配置，你可以灵活地控制 Vue 打包后生成文件的路径和名称，以适应不同的部署需求。