Vue-CLI(vue.config.js)详细配置

Vue和Vue CLI的关系

Vue和Vue CLI是密切相关的两个概念，它们分别代表了Vue.js框架和Vue.js脚手架工具。简单来说，Vue是一个前端JavaScript框架，而Vue CLI则是一个基于命令行的脚手架工具，用于快速搭建Vue项目。

什么是Vue.js

具体来说，Vue.js是一个轻量级、渐进式的JavaScript框架，它专注于构建用户界面，提供了诸如数据绑定、组件化、响应式等特性，使开发者可以更加高效地构建现代化的Web应用程序。Vue.js本身并不包含用于构建应用程序的工具，因此在实际项目中，你需要使用一些辅助工具（如Webpack、Babel、ESLint等）来协助构建和管理Vue应用程序。

什么是Vue CLI

Vue CLI则是一个官方提供的脚手架工具，它通过简单的命令行操作，可以快速搭建和配置一个Vue项目的基础结构，包括Webpack配置、Babel配置、ESLint配置等。除此之外，Vue CLI还提供了一些有用的插件和工具，例如Vue Router、Vuex、axios等，可以让你更加高效地进行开发和调试。需要注意的是，Vue CLI要求使用Node.js版本不低于8.9。

因此，Vue和Vue CLI是两个紧密相关的概念，Vue提供了构建Web应用程序所需的核心框架和特性，而Vue CLI则提供了搭建和管理Vue项目所需的脚手架和工具。在实际开发中，通常使用Vue CLI来快速搭建和管理Vue项目，同时使用Vue.js来构建Web应用程序的核心功能。

Vue.config.js配置

vue.config.js 是 Vue CLI 项目的配置文件，它使用了 Node.js 导出模块的语法。在该文件中，可以配置项目的一些构建和开发配置选项，如配置 webpack、自定义打包路径、代理、开发服务器等等。当 Vue CLI 执行构建或启动服务时，它会自动读取并应用 vue.config.js 中的配置。通过修改 vue.config.js 可以定制化 Vue CLI 生成的项目。

Webpack 相关配置

开发服务器相关配置

CSS相关配置

请注意，这里的配置信息可能会因为版本更新而发生变化，建议查看官方文档以获得最新信息。

插件相关配置

注意：configureWebpack和chainWebpack是互斥的，只能存在其中一个。

通过configureWebpack配置代码混淆

在更早之前我们通常使用的是uglifyjs-webpack-plugin插件来进行代码压缩和混淆，但是可能会出现一些问题，因为它已经很久没有更新了，而且它的实现方式是使用UglifyJS，而非现代化的Terser压缩器。

因此，更推荐使用 TerserPlugin 来进行代码压缩，这是一个现代化的JS压缩器，而且它是由Webpack官方推荐的压缩器。

以下是在Vue项目中使用 TerserPlugin 进行代码压缩的完整实例：

1. 安装依赖

在命令行中运行以下命令来安装 TerserPlugin 插件：

npm install terser-webpack-plugin --save-dev

2. 配置代码混淆

在Vue项目的根目录下的 vue.config.js 文件中添加以下代码来配置代码混淆：

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  configureWebpack: {
    optimization: {
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            compress: {
              warnings: false,
              drop_console: true,
              drop_debugger: true,
              pure_funcs: ['console.log'] // 移除console.log语句
            }
          }
        })
      ]
    }
  }
}

在这个例子中，我们引入了 TerserPlugin 插件，并在 configureWebpack 选项中的 optimization 属性下添加了一个 minimizer 数组，它包含了我们要使用的 TerserPlugin 插件的实例。

TerserPlugin 有一些配置选项，这里我们使用 terserOptions 属性来指定压缩选项，它的 compress 属性用于指定要启用的压缩选项，例如移除警告、console.log语句和debugger语句等。

其他配置