初入Vue（二）-vue.config.js

前言

已下基于 Vue3.x 版本

vue.config.js 是一个配置文件，存在与项目的根目录中。他会被 @vue/cli-service 自动加载。

创建一个新项目，会有如下空配置：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
})

该文件应该导出一个包含了选项的对象

配置解读

1. baseUrl

从 Vue CLI 3.3 起已弃用，现在都使用 publicPath

1. publicPath

默认值：'/'

是部署应用包时的基本 URL，在 Vue CLI的其他地方也会使用这个值，默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 https://www.qjdchina.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.qjdchina.com/h5/，则设置 publicPath 为 /h5/。

这个值也可以被设置为空字符串 ('') 或是相对路径 ('./')，这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径。

像目前我们 风险专家 app，里面的评估详情，就区分出了不同环境的不同根路径，使用一个条件式的值：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  publicPath: process.env.NODE_ENV === "production" ? "/h5/" : "/"
})

1. outputDir

默认值: dist

build 生成的生产环境构建文件目录，可以是静态路径，也可以是相对路径，在 build 后传入 --no-clean 可关闭默认的构建前自动清除功能。默认如下：

module.exports = {
  publicPath: './', // 基本路径
  outputDir: 'dist', // 输出文件目录
}

1. assetsDir

build 生成的生产环境的静态资源文件夹，包括 js、css、img、fonts ，默认如下：

module.exports = {
  publicPath: './', // 基本路径
  outputDir: 'dist', // 输出文件目录
  assetsDir: 'assets', //静态资源文件夹
}

1. indexPath

默认值：index.html

用于设定打包生成的 index.html 文件的存储位置，写法如下：

module.exports = {
  publicPath: './', // 基本路径
  outputDir: 'dist', // 输出文件目录W
  assetsDir: './assets',
  indexPath: 'index.html'
}

1. filenameHashing

默认值: true

生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存，关闭后文件名将不会被 hash。

打开情况下生成如下： 关闭情况下生成如下：

1. pages

构建多页面需要使用

默认值：undefined

目前用不到，不过多研究。

1. lintOnSave

有4种类型的值可选：boolean | 'warning' | 'default' | 'error'

默认值：'default'

是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码。这个值会在 @vue/cli-plugin-eslint 被安装之后生效。

false：关闭 elsint 检测

true：开启每次保存都进行检测，效果与warning一样

warning：开启每次保存都进行检测，lint 报错信息将显示到控制台命令行，编译并不会失败。

default：开启每次保存都进行检测，lint 报错信息将显示到浏览器页面上，且编译失败。

error：开启每次保存都进行检测，lint 报错信息以及警告信息将显示到浏览器页面上，且编译失败。

我们一般使用：warning。

可以通过设置让浏览器 overlay 同时显示警告和错误：

// vue.config.js
module.exports = {
  devServer: {
    overlay: {
      warnings: true,
      errors: true
    }
  }
}

有时我们会把elsint 全环境安装，这样就会产生问题，所以就有了如下解决方案：

// vue.config.js
module.exports = {
  lintOnSave: process.env.NODE_ENV !== 'production'
}

1. runtimeCompiler

默认值：false

是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用 template 选项了，但是这会让你的应用额外增加 10kb 左右。

一般用不上，不展开说了，使用默认即可。

1. transpileDependencies

默认值：false

默认情况下 babel-loader 会忽略所有 node_modules 中的文件，设置为 true，可以避免构建后的代码中出现未转译的第三方依赖。

不过，对所有的依赖都进行转译可能会降低构建速度。如果对构建性能有所顾虑，你可以只转译部分特定的依赖：给本选项传一个数组，列出需要转译的第三方包包名或正则表达式即可。

一般项目中我们会设置为 true。

1. productionSourceMap

默认值： true

如果不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。这里只会控制 js 的逻辑

设置为 false 编译后产生文件的如下： 设置为 true 编译后产生文件的如下：

source map 就是资源地图，其作用就是定位。在定位的时浏览器控制台输出语句在项目文件的位置。在调试的时候，如果有一些JS报错，那么浏览器会通过解析这个map文件来重新merge压缩后的js,使开发者可以用未压缩前的代码来调试，这样会给我们带来很大的方便！

说白了，就是压缩的js与未压缩源文件js之间的映射关系文件。

我们再看下一张图

可以看到 .map 文件比正常文件会大3倍左右。可以考虑在生产环境禁用此功能。

1. crossorigin

默认值：undefined

基本不用，它允许你配置元素获取数据的简单的处理跨域问题。

仅影响由 html-webpack-plugin 在构建时注入的标签 - 直接写在模版 (public/index.html) 中的标签不受影响。

1. integrity

默认值： false

基本不用，防止加载的 CDN 篡改，可以传递一个 hash 字符串，服务器校验这个资源请求的安全性。

1. configureWebpack

比较常用的配置，可以被赋值类型：Object 或者 Function

Object：通过 webpack-merge 合并到最终的配置中。

Function：则会接收被解析的配置作为参数。

就是配置 webpack 的，有时候我们既需要对象类型的配置，也需要函数类型的配置，就可以如下写法，通过 Function 去操作：

// vue.config.js
module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
        // 为生产环境修改配置...
        config.mode = "production";
        config.optimization.minimizer = [
          new UglifyJsPlugin({
            uglifyOptions: {
              compress: {
                warnings: false,
                drop_console: true, //console
                drop_debugger: true,
                pure_funcs: ['console.log'] //移除console
              }
            }
          })
        ]
        config["performance"] = {
          "maxEntrypointSize":10000000,
          "maxAssetSize":30000000
        }
    } else {
      // 为开发环境修改配置...
    }
  }
}

1. chainWebpack

通过链式编程的形式，来修改默认的 webpack 配置，和 configureWebpack 作用一样，但是他只能接收一个 Function。

1. css 的一些列配置，省略。。。
2. devServer

常用配置，其值是一个 Object，一般我们设置代理就在此处，下面是一个常用的配置表：

// vue.config.js
module.exports = {
  devServer: {
    hot: true, 	//启动热刷新功能
    open: true, //服务器启动之后自动打开浏览器
    https: true,//支持https，可以再里面配置证书，秘钥等等
    host: "localhost",//让你的服务器可以被外部访问的地址，可以设置'local-ip' | 'local-ipv4' | 'local-ipv6'
    proxy: {	//代理
      "/testa": {
        target: "https://fengxian-testa.qjdchina.com",
        changeOrigin: true,
        pathRewrite: { "^/testa": "" },
      },
      "/beta": {
        target: "https://fengxian-beta.qjdchina.com",
        changeOrigin: true,
        pathRewrite: { "^/beta": "" },
        secure: false,//默认情况下，不接受在 HTTPS 上运行且证书无效的后端服务器，设置为false，就可以接受了
      },
    },
  }
}

1. parallel

在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建。应该会加快构建速度

1. pwa

网页式的 app ，有点 uni-app 的意思

1. pluginOptions

它可以用来传递任何第三方插件，但是怎么用，用起来的的实例，还未知，期待例子。

问题思考

1. 为什么 filenameHashing 能够更好地控制缓存？

浏览器加载静态文件机制：当浏览器去加载一个页面的静态文件时，浏览器会先去缓存查找当前域名是否已存在这个文件。如果存在，则直接读取缓存里的文件，而不再向服务器请求该资源。浏览器这样的设定减少了请求资源的占用，同时也加快页面的加载速度。这样看来是非常不错的设定。但是，因为这个缓存问题，我们就会遇到这样一个问题：当我们对某个静态文件（ css、js ）修改后，再到浏览器一运行，发现修改并没有起效。

出现这个问题就是浏览器缓存导致的了。

要解决这个问题，我们就要保证每次改动后生成的文件不能与浏览器缓存中的文件名一致就可以了。因此，常用的方法就是给文件名添加一段随机数。

所以建议这个不要关闭。