vue项目打包

// vue.config.js
module.exports = {
  // 输出文件配置
  outputDir: 'dist', // 打包输出的目录，默认是'dist'
  assetsDir: 'assets', // 静态资源目录 (js, css, img, fonts)
  lintOnSave: false, // 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码

  // 生产环境下的配置
  productionSourceMap: false, // 是否生成 source map 文件，建议生产环境关闭以减小打包体积
  configureWebpack: {
    // 自定义 webpack 配置
    optimization: {
      splitChunks: {
        chunks: 'all' // 对所有类型的块进行分割，减少重复代码
      }
    }
  },

  // 构建后的文件名加hash值
  filenameHashing: true,

  // 开发服务器配置
  devServer: {
    open: true, // 启动后自动打开浏览器
    host: '0.0.0.0', // 指定主机地址
    port: 8080, // 指定端口
    https: false, // 是否启用https
    hotOnly: false, // 热更新
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // 目标API服务器
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
};

// 打包命令
// 进入项目根目录，执行以下命令：
// npm run build 或者 yarn build

// 解释说明：
// 1. `vue.config.js` 是 Vue CLI 项目的配置文件，用于自定义构建行为。
// 2. `outputDir` 和 `assetsDir` 分别指定了打包输出的目录和静态资源目录。
// 3. `productionSourceMap` 关闭了生产环境下的 source map 文件生成，以减小打包体积。
// 4. `configureWebpack` 允许我们对 webpack 配置进行更细粒度的控制，比如优化 chunk 分割。
// 5. `devServer` 配置了开发服务器的行为，包括代理设置等。
// 6. 使用 `npm run build` 或 `yarn build` 命令可以将项目打包为生产环境版本。