解析vue.config.js文件

一、用途

创建 Vue 项目时，默认情况下是没有 vue.config.js 文件的。Vue CLI 会提供一组默认的配置，用于构建和开发项目，这些配置在内部被封装好了，并不需要用户手动创建 vue.config.js 文件来进行配置。通过在项目根目录下创建 vue.config.js 文件，你可以自定义 Vue CLI 的默认配置，从而满足项目特定的需求。

一些常见的用途包括：

1、自定义 webpack 配置：

  • 可以通过 vue.config.js 文件来修改 Vue CLI 默认的 webpack 配置，例如添加额外的 loader 或 plugin、调整 webpack 的 entry、output 等选项。

2、配置开发服务器：

  • 在 vue.config.js 中配置开发服务器的选项，例如端口号、代理设置、HTTPS 配置等。

3、配置公共资源路径：

  • 可以指定构建后静态资源的公共路径，比如部署到子路径或 CDN 上时的路径设置。

4、配置环境变量：

  • 可以在 vue.config.js 中设置环境变量，用于在项目中访问和区分不同的环境，比如开发环境、测试环境和生产环境。

5、配置插件：

  • 可以配置 Vue CLI 插件，通过在 vue.config.js 文件中进行相应的设置和调整。

6、配置CSS：

  • 可以配置 CSS 相关的选项，例如启用 CSS modules、使用 PostCSS 插件等。

7、配置Babel：

  • 可以配置 Babel 相关的选项，例如添加额外的 Babel 插件或预设。

二、常见的配置项及其功能说明

module.exports = {
  // 配置开发服务器
  devServer: {
    // 指定开发服务器的主机名，默认为 localhost
    host: 'localhost',
    // 指定开发服务器的端口号，默认为 8080
    port: 8080,
    // 启用 HTTPS，默认为 false
    https: false,
    // 配置开发服务器的代理
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },
  // 配置公共路径
  publicPath: '/',
  // 是否在构建时生成 source map，默认为 false
  productionSourceMap: false,
  // 配置 CSS
  css: {
    // 启用 CSS modules
    requireModuleExtension: true,
    // 是否使用 CSS 预处理器 loader
    loaderOptions: {
      sass: {
        prependData: `@import "@/styles/variables.scss";`
      }
    }
  },
  // 配置 Babel
  transpileDependencies: [
    /* string or regex */
  ],
  // 配置插件
  pluginOptions: {
    // ...
  },
  // 配置 webpack
  configureWebpack: {
    // ...
  },
  // 配置 Webpack Dev Server 的选项
  devServer: {
    // ...
  }
};

三、实践案例

'use strict'
const path = require('path')
// 辅助函数 resolve，它接受一个路径参数 dir，并返回该路径相对于当前文件所在目录的绝对路径
function resolve (dir) {
  return path.join(__dirname, dir)
}
// 引入了用于压缩文件的 webpack 插件 compression-webpack-plugin，它能够在打包时对文件进行 gzip 压缩
const CompressionWebpackPlugin = require('compression-webpack-plugin')
// 定义了一个变量 IS_PROD，它根据当前环境变量 NODE_ENV 的值来判断是否为生产环境
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)
// 正则表达式，用于匹配需要进行 gzip 压缩的文件类型
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i
// 导出了整个配置对象，使其可以被 webpack 使用
module.exports = {
  publicPath: './',
  outputDir: 'dist',
  assetsDir: 'static',
  lintOnSave: process.env.NODE_ENV === 'development',
  productionSourceMap: false,
  css: {
    loaderOptions: {
      // 给 sass-loader 传递选项
      sass: {
        // 所以这里假设你有 `src/variables.scss` 这个文件
        data: '@import "@/assets/css/variables.scss";'
      }
    }
  },
  configureWebpack: config => {
  	// 定义一个空数组，用于存放Webpack插件
    const plugins = []
    // 如果是生产环境，添加以下插件配置
    if (IS_PROD) {
      plugins.push(
        new CompressionWebpackPlugin({ // 使用CompressionWebpackPlugin插件进行gzip压缩
          filename: '[path].gz[query]', // 指定压缩后文件的名称格式
          algorithm: 'gzip', // 指定压缩算法为gzip
          test: productionGzipExtensions, // 指定要压缩的文件类型
          threshold: 10240, // 只有文件大小大于10KB才会被压缩
          minRatio: 0.8 // 只有压缩率达到0.8以上的文件才会被压缩
        })
      )
      // 开启分离js，配置Webpack的优化选项
      config.optimization = {
        runtimeChunk: 'single', // 将runtime代码单独提取为一个chunk
        splitChunks: { // 配置分割代码块的规则
          chunks: 'all', // 选择所有类型的chunk进行优化
          maxInitialRequests: Infinity, // 允许的最大初始请求数，Infinity表示无限制
          minSize: 20000, // 每个代码块的最小大小，小于该值的模块不会被提取
          cacheGroups: { // 定义缓存组
            vendor: { // 缓存组的名称为vendor
              test: /[\\/]node_modules[\\/]/,  // 匹配条件，node_modules目录下的模块
              name (module) { // 模块名称的生成规则
                const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1] // 获取模块名称
                return `npm.${packageName.replace('@', '')}` // 返回以npm.开头的模块名称，@符号替换为空字符串
              }
            }
          }
        }
      };
    }
    // 将定义的插件数组合并到Webpack配置中的插件数组中
    config.plugins = [...config.plugins, ...plugins];
  },
  chainWebpack (config) {
    // 删除 webpack 中的预加载和预获取资源的插件
    // 这些插件通常会在项目中引入一些未使用的资源，对于一些性能要求较高的项目，可能希望移除这些插件以减少无用资源的加载。
    config.plugins.delete('preload') // TODO: need test
    config.plugins.delete('prefetch') // TODO: need test
    // 将入口文件配置为包含了 Babel polyfill 的 main.js 文件
    config.entry.app = ['@babel/polyfill', './src/main.js']
    // 设置了一个别名 @，指向项目中的 src 目录
    // 在代码中引用文件时就可以使用 @ 代替 src
    config.resolve.alias
      .set('@', resolve('src'))
      .end()
    // 如果是开发环境，则调用 config.devtool('cheap-source-map') 方法来配置 devtool 选项，以生成方便调试的源映射文件
    config
      .when(process.env.NODE_ENV === 'development',
        config => config.devtool('cheap-source-map')
      )
    // 图片处理规则
    config.module
      .rule('images')
      .test(/\.(woff2?|eot|ttf|otf|png|jpe?g|gif|svg)(\?.*)?$/) // 匹配图片文件的文件名后缀
      .use('url-loader') // 使用 url-loader 加载器处理图片文件
      .loader('url-loader')
      .options({
        limit: 80000, // 小于 80000 字节的图片转换为 base64 编码的 Data URL
        esModule: false // 禁用 ES 模块语法
      })
      if (IS_PROD) {
        config.module
          .rule('images')
          .test(/\.(woff2?|eot|ttf|otf|png|jpe?g|gif|svg)(\?.*)?$/)
          .use('image-webpack-loader') // 用于优化图片文件
          .loader('image-webpack-loader')
          .options({
            mozjpeg: { progressive: true, quality: 65 },
            optipng: { enabled: false },
            pngquant: { quality: [0.65, 0.9], speed: 4 },
            gifsicle: { interlaced: false }
          })
      }
  }
}

以上代码的主要作用是根据环境判断是否为生产环境，如果是则添加对应的插件配置和优化选项。其中，主要的插件是 CompressionWebpackPlugin，用于对资源文件进行 gzip 压缩，在生产环境中提高加载速度。同时，通过配置 splitChunks 选项，将第三方库和公共模块分离到单独的文件中，以优化浏览器缓存机制，提高页面加载速度。

附：

其中一些关键配置项解析

  1. publicPath: 指定项目的基本 URL 路径，通常用于将静态资源部署到 CDN 上时使用。在这个配置中，‘./’ 表示相对路径。
  2. outputDir: 指定打包后的文件输出目录。
  3. assetsDir: 指定放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
  4. productionSourceMap: 是否在生产环境下生成 source map 文件，方便调试，默认为 false。
  5. css.loaderOptions: 用于向 CSS 相关的 loader 传递选项。在这里使用 sass-loader 加载器，引入了一个变量文件。
  6. configureWebpack: 用于修改 webpack 的配置，在这里添加了一些插件，比如压缩插件 CompressionWebpackPlugin，根据环境变量决定是否启用压缩。
  7. chainWebpack: 通过 webpack-chain 的 API 修改 webpack 配置，包括修改入口文件、配置别名、删除预加载和预取等操作。
  8. url-loader 和 image-webpack-loader: 用于处理图片资源，限制图片大小，并进行图片优化，例如压缩、转换格式等。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/575870.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【Mysql】mysql本地环境变量的配置

【Mysql】mysql本地环境变量的配置

mysql本地环境变量的配置 1.找到Mysql的安装位置 前面步骤完成后安装好MySQL，为MySQL配置环境变量。MySQL默认安装在C:\Program Files下。 2.选择此电脑 右键属性 3.选择 高级系统设置 环境变量 4.配置环境变量 1)新建MYSQL_HOME变量,并配置: C:\Program Fi…
阅读更多...
李沐-28 批量归一化【动手学深度学习v2】

李沐-28 批量归一化【动手学深度学习v2】

记录关于批量归一化的理解，如有出入还请批评指正。 一、批量归一化层主要作用在以下两种情况： 全连接层和卷积层的输出上，同时要在激活函数之前还可以是全连接层和卷积层的输入上 二、关于“批量归一化对于全连接层时，是作用在特…
阅读更多...
vue 实现项目进度甘特图

vue 实现项目进度甘特图

项目需求： 实现以1天、7天、30天为周期（周期根据筛选条件选择），展示每个项目不同里程碑任务进度。 项目在Vue-Gantt-chart: 使用Vue做数据控制的Gantt图表基础上进行了改造。 有需要的小伙伴也可以直接引入插件，自己…
阅读更多...
基于springboot实现企业级工位管理系统项目【项目源码+论文说明】计算机毕业设计

基于springboot实现企业级工位管理系统项目【项目源码+论文说明】计算机毕业设计

基于springboot实现企业级工位管理系统演示 摘要 随着信息技术在管理上越来越深入而广泛的应用，管理信息系统的实施在技术上已逐步成熟。本文介绍了企业级工位管理系统的开发全过程。通过分析企业级工位管理系统管理的不足，创建了一个计算机管理企业级工…
阅读更多...
【深度学习】YOLOv5，金属表面的缺陷检测，GC10-DET数据集

【深度学习】YOLOv5，金属表面的缺陷检测，GC10-DET数据集

目录： 文章目录 数据集数据集转换下载yolov5创建 dataset.yaml训练参数开始训练数据分布问询、帮助 数据集 数据集地址： https://github.com/lvxiaoming2019/GC10-DET-Metallic-Surface-Defect-Datasets 数据集下载方式： Download link&…
阅读更多...
transformer 最简单学习3， 训练文本数据输入的形式

transformer 最简单学习3， 训练文本数据输入的形式

1、输入数据中，源数据和目标数据的定义 def get_batch(source,i):用于获取每个批数据合理大小的源数据和目标数据参数source 是通过batchfy 得到的划分batch个 ,的所有数据，并且转置列表示i第几个batchbptt 15 #超参数，一次输入多少个ba…
阅读更多...
Spring事务回滚核心源码解读

Spring事务回滚核心源码解读

记一次Springboot事务超时不回滚的分析过程 在Springboot中，我用的xml进行事务管理，DataSourceTransactionManager作为事务管理器，配置了事务控制在Service层；在事务管理器中，配置了defaultTimeout事务超时时间为5秒&…
阅读更多...
云香印象终端自动化工具（监听农行收款云音箱）

云香印象终端自动化工具（监听农行收款云音箱）

项目成品 支持自动挂单✅完成监控收款云音箱✅完成卷烟盘点✅完成补单✅完成自动入库✅完成监控微信支付✅完成自动提交会员信息✅完成 用到的技术栈：PythonMQTT5.0PHP 云香印象终端自动收款工具 ​​​​​ 当顾客扫了三合一二维码且支付完成时，监控收到…
阅读更多...
精酿啤酒：酿造工艺的自动化与智能化发展

精酿啤酒：酿造工艺的自动化与智能化发展

随着科技的不断进步，自动化与智能化已成为啤酒酿造工艺的重要发展方向。Fendi Club啤酒紧跟时代潮流，积极推动酿造工艺的自动化与智能化发展，旨在提高生产效率、确保产品品质和满足市场需求。 Fendi Club啤酒引入自动化生产设备。他们采用自动…
阅读更多...
Mybatis-plus 字段结果为NULL

Mybatis-plus 字段结果为NULL

问题 Mybatis-plus 字段结果为NULL 详细问题 笔者使用SpringBootMybatis-plus 进行项目开发。进行接口请求测试，在确定SQL语句没有问题的前提下，返回记录部分字段(譬如字段name)为空。 解决方案 修改Mybatis-plus中mapper的xml文件，使re…
阅读更多...
CentOS7版本安装mysql

CentOS7版本安装mysql

文章目录 1.安装mysql的前置条件2.清理原有的mysql数据库3.查看是否安装mariadb4.安装mysql依赖包5.解压缩mysql包6.安装目录赋权限（注：R必须是大写）7.创建MySQL组8.将mysql目录的权限授给mysql用户和mysql组9.创建mysql安装初始化配置文件10…
阅读更多...
APP广告变现项目

APP广告变现项目

我们提供的服务可以简化为以下几点： 我们将为您开发一款应用程序(APP)，该APP能够连接市场上的主要广告联盟平台。 我们将指导您完成整个“养机”流程，并确保您的单台设备每条广告能产生大约1元的收益。若您拥有10台设备，每日收益…
阅读更多...
ElasticSearch搜索引擎中，在Kibana客户端使用命令的时候，千万不要加分号结尾

ElasticSearch搜索引擎中，在Kibana客户端使用命令的时候，千万不要加分号结尾

ElasticSearch搜索引擎中，在Kibana客户端使用命令的时候，千万不要加分号结尾 今天遇到了一个非常难发现的bug 由于经常写java代码，因此常常会在一句代码结尾之处写上一个分号，并且潜意识里觉得这就是非常正常的事情 不会有什么问…
阅读更多...
c++的智能指针（5） -- weak_ptr

c++的智能指针（5） -- weak_ptr

概述 我们在使用shared_ptr会出现以下的问题&#xff0c;会导致内存泄露。 代码1: 类内指针循环指向 #include <iostream> #include <memory>class B;class A { public:A() {std::cout << "Construct" << std::endl;}~A() {std::cout <…
阅读更多...
鸿蒙入门11-DataPanel组件

鸿蒙入门11-DataPanel组件

数据面板组件 用于将多个数据的占比情况使用 占比图 进行展示 参数 参数形式 &#xff1a; DataPanel( options:{ values: number[], max?: number, type?: DataPanelType } ) 参数名 参数类型 是否必填 默认值 参数描述 values number[] 是 - 数据值列表 最大支持…
阅读更多...
Android Studio的button点击事件

Android Studio的button点击事件

xml添加onClick调用方法 public class MainActivity extends AppCompatActivity {// 创建系统时间的文本控件TextView systemTimeTextView;Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activit…
阅读更多...
Springboot+Vue项目-基于Java+MySQL的海滨体育馆管理系统(附源码+演示视频+LW)

Springboot+Vue项目-基于Java+MySQL的海滨体育馆管理系统(附源码+演示视频+LW)

大家好&#xff01;我是程序猿老A&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。 &#x1f49e;当前专栏&#xff1a;Java毕业设计 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; &#x1f380; Python毕业设计 &…
阅读更多...
Jmeter工具+ant+jenkins实现持续集成

Jmeter工具+ant+jenkins实现持续集成

jmeterantjenkins持续集成 一、下载并配置jmeter 首先下载jmeter工具&#xff0c;并配置好环境变量&#xff1b;参考&#xff1a; jmeter默认保存的是.jtl格式的文件&#xff0c;要设置一下bin/jmeter.properties,文件内容&#xff0c;保存jmeter.save.saveservice.output_f…
阅读更多...
【linux】Bad owner or permissions on

【linux】Bad owner or permissions on

在root用户下执行scp操作向另外一个节点拷贝文件时发生了如下错误&#xff1a; Bad owner or permissions on /etc/crypto-policies/back-ends/openssh.config 我们查看他的权限时发现它所链接的文件权限为777 解决方法就是&#xff1a; chmod 600 /etc/crypto-policies/back-e…
阅读更多...
关于加强电力系统通信与电网调度自动化建设问题的规定

关于加强电力系统通信与电网调度自动化建设问题的规定

关于加强电力系统通信与电网调度自动化建设问题的规定 为了保障电力系统安全、经济、优质、可靠运行&#xff0c;必须加强电网调度管理和提高技术装备水平。根据当前电网技术装备状况&#xff0c;结合电力系统通信和电网调度自动化的特点&#xff0c;以及今后规划发展的要求&am…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站