重写 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.logconfig.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.csdn.net/a1983029606/article/details/115690820config.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/#lessoptionsjavascriptEnabled: 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，默认：falseproxy: {// 设置代理'/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）。