vue.config.js文件重写打包工具配置信息

重写 Webpack 的配置信息

// cnpm install compression-webpack-plugin@6.1.1 -D       gzip压缩插件，需要引入
// cnpm i image-webpack-loader@8.1.0 --save-dev           图片压缩，不需要引入
// npm i webpack-bundle-analyzer@4.7.0 --save-dev         打包分析插件
// npm i speed-measure-webpack-plugin -D                  打包时间
// npm i hard-source-webpack-plugin -D                    构建时进行缓存

const CompressionWebpackPlugin = require('compression-webpack-plugin') // 开启gzip压缩， 按需引用
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin // 引入打包分析插件
const SpeedMeasurePlugin = require('speed-measure-webpack-plugin')
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin')
const webpack = require('webpack')

const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i // 开启gzip压缩， 按需写入
const isProduction = process.env.NODE_ENV === 'production'
const BASE_URL = process.env.NODE_ENV === 'production' ? './' : './'
const path = require('path')

function resolve (dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  // 其他配置可以走默认
  publicPath: BASE_URL, // 基本路径
  outputDir: 'dist', // 输出文件目录
  lintOnSave: process.env.NODE_ENV !== 'production', // 生产环境不进行eslint校验
  productionSourceMap: false, // 生产环境是否生成 sourceMap 文件
  // assetsDir: '',  // 静态文件要不要放在一个文件夹里，默认值是‘’，有需要可以自己改

  // webpack配置
  chainWebpack: config => {
    // 移除 preload(预载) 插件
    config.plugins.delete('preload')
    // 移除 prefetch(预取) 插件
    config.plugins.delete('prefetch')
    if (isProduction) {
      // 生产环境下---压缩图片
      config.module
        .rule('images')
        .use('image-webpack-loader')
        .loader('image-webpack-loader')
        .options({ bypassOnDebug: true })
        .end()
    }
  },
  configureWebpack: (config) => {
    // 生产和开发环境都有的配置
    config.devtool = 'source-map'
    // 开启缓存
    config.plugins.push(
      new HardSourceWebpackPlugin()
    )
    // 配置别名
    Object.assign(config.resolve, {
      alias: {
        '@': path.resolve(__dirname, './src')
      }
    })
    // 生产环境下的配置
    if (isProduction) {
      // 添加webpack插件
      config.plugins.push(
        new SpeedMeasurePlugin(), // 构建时间
        new BundleAnalyzerPlugin() // 构建体积
        // 一些依赖，咱们也许只是用到了一部分，不必所有解析，好比moment中的语言包，咱们通常只用中文包就够了，因此能够这样配置：
        // new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /zh-cn/)
      )
      // 打包文件大小配置
      config.performance = {
        maxEntrypointSize: 10000000, // 根据入口起点的最大体积，控制 webpack 何时生成性能提示。
        maxAssetSize: 30000000 // 根据单个资源体积(单位: bytes)，控制 webpack 何时生成性能提示。
      }
      // 生产环境 优化打包chunk-vendors.js文件体积过大。
      Object.assign(config.optimization, {
        runtimeChunk: 'single',
        splitChunks: { // 默认的splitChunks会全部清空
          chunks: 'all',
          minSize: 20 * 1024 // chunks超过20000bit（20kb）将被单独打包
          // cacheGroups: { // 对node_modules下的库单独打包。暂时先不开启，可以看看打包体积后决定
          //   vendor: { // 默认的vendor.js
          //     test: /[\\/]node_modules[\\/]/, // 匹配映射文件
          //     name (module) {
          //       // get the name. E.g. node_modules/packageName/not/this/part.js
          //       // or node_modules/packageName
          //       const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
          //       // npm package names are URL-safe, but some servers don't like @ symbols
          //       return `npm.${packageName.replace('@', '')}`
          //     }
          //   }
          // }
        }
      })
      // 清除console.log
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true

      // 开启 gzip 压缩 文件
      // 注：生成的压缩文件以.gz为后缀，一般浏览器都已支持.gz的资源文件，在http请求的Request Headers 中能看到 Accept-Encoding:gzip。要使服务器返回.gz文件，还需要对服务器进行配置，根据Request Headers的Accept-Encoding标签进行鉴别，如果支持gzip就返回.gz文件。
      // 服务器配置参考：https://blog.youkuaiyun.com/a1983029606/article/details/115690820
      config.plugins.push(
        new CompressionWebpackPlugin({
          filename: '[path][base].gz',
          algorithm: 'gzip',
          test: productionGzipExtensions,
          threshold: 10240, // 只有大小大于该值的资源会被处理
          minRatio: 0.8 // 只有压缩率小于这个值的资源才会被处理
        })
      )
    }
  },

  // css相关配置
  css: {
    loaderOptions: {
      // 启用less中javascript支持
      less: {
        // less-lorder配置项 详见 https://www.webpackjs.com/loaders/less-loader/#lessoptions
        javascriptEnabled: true
      }
    }
  },

  // webpack-dev-server 相关配置
  devServer: {
    host: '0.0.0.0', // ip 本地
    port: 2023, // 设置端口号
    // inline: true, // 用于设置代码保存时是否自动刷新页面。默认：true
    // open: false, //配置自动启动浏览器，默认：false
    // hot: true, // 用于设置代码保存时是否进行热更新（局部刷新，不刷新整个页面）。默认：true
    // https: false, // 用于设置是否启用https，默认：false
    proxy: {
      // 设置代理
      '/api': {
        // 代理名称   凡是使用/api开头的地址都是用此代理
        target: 'http://1.2.3.4:5000/', // 需要代理访问的api地址
        changeOrigin: true // 允许跨域请求
        // pathRewrite: {
        //   // 重写路径，替换请求地址中的指定路径
        //   '^/api': '/' // 将请求地址中的/api替换为空，也就是请求地址中不会包含/api/
        // }
      }
    }
  },
  // 第三方插件配置
  pluginOptions: {}
}

重写 Vite 的配置信息

vue.config.js 是一个可选的配置文件，可以在其中定义一些自定义的配置选项，以覆盖 Vite 的默认配置。你可以在这个文件中引入 Vite 的相关模块，然后使用 Vite 的 API 来修改或扩展默认配置。

以下是一个示例 vue.config.js 文件，用于重写 Vite 的配置信息：

// vue.config.js  
  
module.exports = {  
  // 在这里定义你的自定义配置  
  // 例如，修改默认的构建输出目录  
  build: {  
    outDir: 'dist'  
  }  
}

在上面的示例中，我们通过 module.exports 导出一个对象，该对象包含一个 build 属性，用于修改默认的构建输出目录。在构建过程中，Vite 将使用这个新的输出目录来生成构建结果。

要使 vue.config.js 文件生效，确保将其放置在项目的根目录下，并在 Vite 的配置中引用它。例如，如果你使用的是 Vite 的 vite.config.js 配置文件，可以在其中添加以下代码来引用 vue.config.js：

// vite.config.js  
  
import { defineConfig } from 'vite'  
import vue from '@vitejs/plugin-vue'  
import path from 'path'  
  
// 引用 vue.config.js 文件  
import { vueConfig } from './vue.config.js'  
  
export default defineConfig({  
  plugins: [vue()],  
  // 将 vueConfig 合并到默认配置中  
  ...vueConfig,  
  resolve: {  
    alias: {  
      // 在这里添加自定义的别名配置  
    }  
  },  
  build: {  
    // 在这里添加自定义的构建配置  
  },  
  // 在这里添加其他 Vite 配置选项  
})

在上面的示例中，我们通过将 vueConfig 对象合并到默认配置中，将 vue.config.js 中的自定义配置应用到整个 Vite 项目中。你还可以根据需要添加其他的自定义配置选项，例如别名（alias）和构建选项（build options）。