vue.config.js 简介及实例

文章目录

- [vue.config.js 基础配置](#vue.config.js 基础配置)
- [vue.config.js 实例](#vue.config.js 实例)
- 应用补充
- 应用总结

vue.config.js 基础配置

publicPath配置
- 含义：publicPath是部署应用包时的基本URL。
- 示例：
  - 假设你的Vue应用要部署在一个子目录/my - app下，你可以设置publicPath: '/my - app'。这样，当引用资源（如CSS文件、JavaScript文件、图片等）时，它们的路径会以/my - app开头。例如，<img src="publicPath + '/logo.png'" />（在代码构建过程中会正确替换publicPath的值）。
- 用途：在不同的部署环境（如开发环境、测试环境、生产环境）下，正确设置publicPath可以确保资源能够被正确加载。特别是在将应用部署到非根目录的服务器路径时非常重要。
outputDir配置
- 含义：指定构建输出文件的目录。
- 示例：
  - 如果设置outputDir: 'dist'，那么构建后的文件（如js、css、html等）将被输出到项目根目录下的dist文件夹中。
- 用途：方便管理构建后的文件，并且在部署时可以直接将这个目录下的内容部署到服务器上。
assetsDir配置
- 含义：指定生成的静态资源（如js、css、img等）在outputDir中的存放目录。
- 示例：
  - 设置assetsDir: 'static'，那么所有的静态资源将会被放在outputDir（假设是dist）下的static文件夹中。这样可以对静态资源进行分类管理，使得项目结构更加清晰。
- 用途：有助于更好地组织项目中的静态资源，便于维护和更新。
indexPath配置
- 含义：指定生成的index.html的输出路径。
- 示例：
  - 可以设置indexPath: 'my - index.html'，这样构建后生成的index.html文件名将是my - index.html，而不是默认的index.html。不过这种情况比较少见，一般用于特殊的部署要求。
- 用途：在某些特殊的部署场景下，比如需要与后端框架的特定文件命名规则相匹配时，修改indexPath可以满足要求。
pages配置（用于多页面应用）
- 含义：如果你的项目是一个多页面应用（MPA），pages配置允许你指定每个页面的入口文件、模板文件和输出文件名等。
- 示例：
  - 假设你有两个页面home和about，vue.config.js中的pages配置可以如下：
  javascript 复制代码
```
pages: {
  home: {
    // 入口文件
    entry:'src/pages/home/main.js',
    // 模板文件
    template:'src/pages/home/index.html',
    // 输出文件名
    filename: 'home.html'
  },
  about: {
    entry:'src/pages/about/main.js',
    template:'src/pages/about/index.html',
    filename: 'about.html'
  }
}
```
- 用途：构建多页面应用时，正确配置pages可以确保每个页面都有自己独立的构建输出，包括正确的JavaScript入口、HTML模板和输出文件名。
lintOnSave配置
- 含义：控制在开发过程中，每次保存文件时是否进行代码规范检查（通常是ESLint检查）。
- 示例：
  - 设置lintOnSave: true，那么在开发过程中，每次保存.vue、.js等文件时，会自动运行ESLint检查，将不符合代码规范的地方在控制台输出提示。如果设置为false，则不会在保存文件时进行检查。
- 用途：有助于保持代码质量，及时发现代码中的潜在问题，如语法错误、变量未定义等，但如果检查过于频繁影响开发效率，也可以将其关闭。

vue.config.js 实例

javascript 复制代码

const path = require('path');
const webpack = require('webpack');

module.exports = {
  // 部署应用包时的基本 URL
  publicPath: process.env.NODE_ENV === 'production'? '/your-project-name/' : '/',
  // 构建输出文件的目录
  outputDir: 'dist',
  // 生成的静态资源在 outputDir 中的存放目录
  assetsDir:'static',
  // 生成的 index.html 的输出路径
  indexPath: 'index.html',

  // 设置 @ 别名，方便在项目中引用模块
  chainWebpack: config => {
    config.resolve.alias
    .set('@', path.resolve(__dirname,'src'));
  },

  // CSS 相关配置，这里配置 Sass
  css: {
    loaderOptions: {
      sass: {
        // 配置 Sass 全局变量、函数等的引入路径等，这里可以按需添加
        additionalData: `
          @import "@/styles/variables.scss";
        `
      }
    }
  },

  // 配置 webpack 插件等，用于添加 jQuery、Cesium 相关依赖
  configureWebpack: {
    plugins: [
      // 引入 jQuery
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery'
      })
    ],
    // 对于 Cesium 这种大的库，可能需要配置外部扩展，
    // 避免打包进最终的 bundle 文件（假设在 HTML 中通过 CDN 引入 Cesium）
    externals: {
      cesium: 'Cesium'
    }
  },

  // 图片资源相关配置，比如限制图片大小等（以下示例仅是示意，可按需调整）
  chainWebpack: (config) => {
    config.module
    .rule('images')
    .use('url-loader')
      // 这里设置小于 10 * 1024（10KB）的图片转为 base64 格式，可根据实际情况调整
    .loader('url-loader')
    .tap(options => Object.assign(options, { limit: 10 * 1024 }))
  },

  // 大文件切片配置（以 webpack 的分包策略来举例，
  // 以下示例简单示意按照一定大小拆分文件，并非严格 10M 等分，
  // 需根据实际进一步完善）
  configureWebpack: {
    optimization: {
      splitChunks: {
        chunks: 'all',
        minSize: 10 * 1024 * 1024, // 10M，这里设置拆分文件的最小尺寸，可按需精确调整逻辑
        cacheGroups: {
          // 自定义的分组，可以根据模块特性等进行更细致划分
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            name:'vendors',
            priority: -10
          }
        }
      }
    }
  }
};

对于CDN引用的index.html应用情况示例（以引入Cesium为例），在index.html文件头部（通常在<head>标签内）添加如下类似代码：

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Your App Title</title>
  <!-- 引入 Cesium 的 CDN 资源，版本号等根据实际需求选择 -->
  <link rel="stylesheet" href="https://cesium.com/downloads/cesiumjs/releases/1.100/Build/Cesium/Widgets/widgets.css" />
  <script src="https://cesium.com/downloads/cesiumjs/releases/1.100/Build/Cesium/Cesium.js"></script>
</head>

<body>
  <div id="app"></div>
  <!-- 其他 script 等内容 -->
</body>

</html>

请注意：

上述大文件切片配置只是一个基础的思路示例，要做到精确按照10M为等分线分割大文件，可能需要更复杂的定制逻辑，比如基于文件内容长度等进行准确计算和拆分，这里的minSize只是控制分包的最小尺寸起点。
对于不同版本的Vue、Webpack以及各种依赖库，配置细节可能需要进一步微调来保证兼容性和正确运行。
在实际项目中，像CDN引入资源要确保资源的可用性以及符合项目的许可要求等情况。

如果你在配置过程中遇到问题，可以根据具体的报错信息进一步排查和调整这些配置。

应用补充

pluginOptions配置
- 含义：这是一个用于向Vue CLI插件传递自定义选项的配置。它允许插件的使用者根据自己的需求来定制插件的行为。
- 示例：
  - 假设你使用了一个自定义的vue - plugin - myplugin插件，该插件可以接受一个名为myOption的选项来改变插件内部的样式主题。你可以在vue.config.js中这样配置：
  javascript 复制代码
```
pluginOptions: {
  'vue - plugin - myplugin': {
    myOption: 'dark - theme'
  }
}
```
- 用途：在使用第三方插件或者自己开发的插件时，提供了一种灵活的方式来定制插件功能，以满足特定的项目需求。

pwa配置（渐进式Web应用配置）

含义：用于配置渐进式Web应用相关的设置，如生成service - worker、配置应用图标、设置离线缓存策略等。

示例：

一个简单的PWA配置可能包括：

javascript 复制代码

pwa: {
  name: 'My Awesome PWA',
  themeColor: '#4DBA87',
  msTileColor: '#000000',
  appleMobileWebAppCapable: 'yes',
  appleMobileWebAppStatusBarStyle: 'black',
  workboxPluginMode: 'GenerateSW',
  workboxOptions: {
    skipWaiting: true,
    clientsClaim: true,
    runtimeCaching: [
      {
        urlPattern: /^https:\/\/api.example.com\/.*/,
        handler: 'networkFirst'
      },
      {
        urlPattern: /\.(?:png|jpg|jpeg|svg|gif)$/,
        handler: 'cacheFirst'
        options: {
          cacheName: 'images',
          expiration: {
            maxEntries: 50
          }
        }
      }
    ]
  }
}

用途：可以将Vue应用转换为渐进式Web应用，提供离线访问功能、推送通知等高级特性，提升用户体验。不过，PWA的配置相对复杂，需要对其概念和工作原理有一定的了解。

optimizationMinimize配置（与构建优化相关）
- 含义：控制在构建过程中是否对代码进行最小化（压缩）处理。在生产环境构建时，通常会对代码进行压缩以减小文件大小，提高页面加载速度。
- 示例：
  - 一般情况下，在生产环境默认是optimizationMinimize: true，表示会对代码进行压缩。如果出于某些调试目的或者特殊情况，你可以设置为false来关闭代码压缩。
  javascript 复制代码
```
configureWebpack: {
  optimization: {
    minimize: false
  }
}
```
- 用途：在开发过程中或者遇到代码压缩导致的问题时，通过调整这个配置可以方便地控制是否进行代码压缩，以便更好地调试和定位问题。
filenameHashing配置（文件名哈希相关）
- 含义：控制是否在构建输出的文件名（如JavaScript文件、CSS文件）中添加哈希值。添加哈希值可以确保每次构建后，文件内容发生变化时文件名也会相应改变，有助于浏览器缓存更新。
- 示例：
  - 设置filenameHashing: false会使得构建输出的文件名不包含哈希值，在一些特殊的部署场景或者开发调试环境下可能会用到。默认情况下，在生产环境filenameHashing通常是true。
  javascript 复制代码
```
configureWebpack: {
  output: {
    filenameHashing: false
  }
}
```
- 用途：在某些特定的缓存策略或者调试场景下，可以灵活地控制文件名是否添加哈希值，以便更好地管理缓存和文件更新。

应用总结

注意事项
- 配置语法和模块要求
  - vue.config.js是一个JavaScript模块，必须通过module.exports导出配置对象。确保配置语法正确，避免JavaScript语法错误，否则可能导致项目构建或运行出现问题。
  - 例如，在配置对象中属性名拼写错误或者在函数调用时参数错误等情况都可能引发错误。
- 版本兼容性
  - 不同版本的Vue CLI和相关依赖（如Webpack）可能会对vue.config.js中的配置有不同的要求和行为。在升级或更换版本时，需要检查配置是否仍然有效。
  - 例如，一些旧版本支持的配置属性可能在新版本中被废弃，或者新的配置属性和方法被引入。
- 路径问题
  - 在配置文件中涉及到路径相关的配置（如publicPath、outputDir、chainWebpack中对文件路径的修改等），要注意路径的正确性。路径应该是相对于项目根目录的，并且要考虑不同操作系统下的路径格式差异（如Windows使用反斜杠\，而Unix - like系统使用正斜杠/）。
  - 例如，在chainWebpack配置中，config.resolve.alias.set('@', path.resolve(__dirname,'src'))使用__dirname获取当前文件所在目录，再结合path.resolve来正确设置@别名指向项目的src目录。
- 插件配置细节
  - 当配置各种插件相关选项（如pluginOptions）时，需要深入了解插件的文档和要求。不同插件有不同的配置方式和可接受的参数，错误的配置可能导致插件无法正常工作。
  - 例如，对于单元测试插件@vue/cli - plugin - unit - jest，错误地配置testMatch选项可能会导致测试文件无法正确匹配，从而无法运行预期的单元测试。
- 构建性能影响
  - 一些配置（如parallel配置构建并行处理、大文件切片配置等）会对构建性能产生影响。在调整这些配置时，要注意对构建时间和资源占用的平衡。
  - 例如，开启并行构建可能会占用更多的系统资源，如果系统资源有限，可能会导致构建过程不稳定或者其他程序运行缓慢。
应用场景
- 项目部署调整
  - 场景描述 ：当需要将Vue应用部署到不同的环境（如开发环境、测试环境、生产环境）时，vue.config.js可以用于配置部署相关的参数。例如，在生产环境下，可能需要设置正确的publicPath来确保资源能够正确加载，并且设置outputDir来指定构建输出文件的存放位置，方便部署到服务器。
  - 示例：
    - 如果应用要部署到一个子目录/my - app下，可设置publicPath: '/my - app'，outputDir: 'dist - my - app'，这样构建后的文件会存放在dist - my - app目录中，并且资源的引用路径会以/my - app开头，符合部署要求。
- 资源管理优化
  - 场景描述：用于优化项目中的资源管理，包括CSS、JavaScript、图片等。可以配置CSS预处理器，设置资源的加载规则（如图片转为Base64格式的大小限制），以及对代码进行分包处理以提高加载速度。
  - 示例：
    - 通过css属性下的loaderOptions配置Sass，使得项目可以更好地管理样式文件。在chainWebpack中配置rule('images')可以控制图片资源的加载方式，比如对于小图片直接转为Base64格式，减少HTTP请求。通过configureWebpack中的optimization配置代码分包策略，提高应用的首次加载速度。
- 开发服务器定制
  - 场景描述：在开发过程中，定制开发服务器的行为。例如，解决跨域问题、调整服务器端口等，方便前后端分离开发中的联调工作。
  - 示例：
    - 设置devServer的proxy属性可以将前端请求代理到后端服务器，避免跨域。比如proxy: {'/api': {target: 'http://localhost:3000', changeOrigin: true}}，这样前端以/api开头的请求会被转发到http://localhost:3000的后端服务器。
- 插件和工具集成
  - 场景描述 ：与各种插件和工具集成，如ESLint、Jest、Vue Router、VueX等，通过pluginOptions等配置方式定制这些插件和工具在项目中的行为，以满足项目的特定需求。
  - 示例：
    - 在pluginOptions中配置@vue/cli - plugin - eslint可以定制ESLint检查的方式和时机，如{formatter: 'eslint - formatter - custom', lintOn: ['save', 'commit']}，既可以自定义错误信息格式，又可以在保存文件和提交代码时进行检查。

vue.config.js 简介 及 实例

文章目录

vue.config.js 基础配置

vue.config.js 实例

应用补充

应用总结

vue.config.js 简介及实例