javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > vue.config.js重写打包配置

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

作者:jsPao

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.csdn.net/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)。

到此这篇关于vue.config.js文件重写打包工具配置信息的文章就介绍到这了,更多相关vue.config.js重写打包配置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文