vue.config.js中打包相关配置

在vue.config.js中，可以配置很多与打包相关的选项。以下是一些常见的配置示例：

module.exports = {
  // 基本路径
  publicPath: process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/',
 
  // 输出文件目录
  outputDir: 'dist',
 
  // 静态资源目录 (js, css, img, fonts)
  assetsDir: 'assets',
 
  // 生产环境是否生成 sourceMap 文件
  productionSourceMap: false,
 
  // CSS 相关选项
  css: {
    // 是否使用css分离插件 ExtractTextPlugin
    extract: true,
    // 开启 CSS source maps?
    sourceMap: false
  },
 
  // 开发服务器设置
  devServer: {
    open: true,
    host: 'localhost',
    port: 8080,
    https: false,
    hotOnly: false,
    proxy: null, // string | Object
    before: app => {}
  },
 
  // 插件选项
  pluginOptions: {
    // ...
  },
 
  // configureWebpack 或 chainWebpack 调整内部webpack配置
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 生产环境的配置
      config.plugins.push(new MyPlugin());
    } else {
      // 开发环境的配置
    }
  },
  chainWebpack: config => {
    config.plugin('html').tap(args => {
      if (process.env.NODE_ENV === 'production') {
        // 修改args[0]的属性来影响htmlWebpackPlugin
      }
      return args;
    });
  }
};

这些配置可以根据你的项目需求进行调整。例如，你可能需要更改publicPath来指定你的应用在生产环境中的基本URL，或者调整outputDir来改变构建文件的输出目录。对于更高级的配置，你可以使用configureWebpack或chainWebpack来直接修改webpack配置。