Vue-cli之vue.config.js

vue.config.js是什么？

1、vue.config.js 是一个可选的配置文件，可对vue-cli(webpack)自定义配置。
2、和 package.json 同级的，根目录下
3、会被 @vue/cli-service 自动加载

1、publicPath（Vue CLI 3.3 之前用baseUrl）

部署应用包时的基本 URL，默认值 / ，用来配置应用包dist目录下index.html引入资源路径，例如，如果你的应用被部署在 https://12345/hjm/，则设置 publicPath 为 /hjm/。
这个值也可以被设置为空字符串 ('') 或是相对路径 ('./')，这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径。注意：history模式的路由及多页面应用时publicPath避免使用相对路径('./')。

image.png

image.png

2、outputDir

打包输出在dist中的目录，默认值'dist'，每次执行时会先清除dist中已有的相同资源(构建时传入 --no-clean 可关闭清除功能)。
输出目录如：outputDir : 'dist/DEV/70000080'

image.png

3、assetsDir

基于outputDir目录下放置的静态资源目录，会与index.html同级。与publicPath相似。

image.png

4、indexPath

自定义入口页，默认index.html

image.png

5、filenameHashing

默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存，默认值 true。
设置false，生成的静态资源文件不会带有hash值，这样会造成浏览器二次浏览项目资源文件缓存问题。

image.png

6、pages

配置多页面入口

module.exports = {
    pages: {
      index: {
        entry: 'src/main.js',  // page 的入口
        template: 'public/index.html', // 模板来源
        filename: 'index.html', //  在 dist/index.html 的输出
      },
      demo: {
        entry: 'src/pages/demo/main.js',
        template: 'public/demo.html',
        filename: 'demo.html',
      },
      demo2: {
        entry: 'src/pages/demo2/main.js',
        template: 'src/pages/demo2/demo2.html',
        filename: 'demo2.html',
      },
    }
  }

7、lintOnSave

设置是否在开发环境下每次保存代码时都启用 eslint，默认值：default
可选值：
false：关闭每次保存都进行检测
true：开启每次保存都进行检测，效果与warning一样
‘warning’：开启每次保存都进行检测，lint 错误将显示到控制台命令行，而且编译并不会失败。
‘error’：开启每次保存都进行检测，lint 错误将显示到浏览器页面上，且编译失败。
‘default’：同’error’

8、runtimeCompiler & runtimeonly

main.js中 new Vue

runtimeCompiler

image.png

Vue中的模板如何最终渲染成真实DOM
template -> ast -> render -> vdom -> UI

runtimeonly

image.png

Vue中的模板如何最终渲染成真实DOM
render -> vdom -> UI

runtimeonly比runtimeCompiler性能更高，代码量更少

那么.vue文件中的template是由谁处理的
是由vue-template-compiler

runtime-only 更快的原因：

runtime-only比runtime-compiler更快，因为它省略了vue内部过程中的第一个过程，如果是runtime-compiler那么main.js中就会出现template从而需要过程一导致增加了一个过程，同时增加了大小而 runtime-only 模式中不是没有写 template ，只是把 template 放在了.vue 的文件中了并有一个叫 vue-template-compiler的在开发依赖时将.vue文件中的 template 解析成 render 函数了因为是开发依赖，不在最后生产中，所以最后生产出来的运行的代码没有template

9、transpileDependencies

默认情况下 babel-loader 会忽略所有 node_modules 中的文件，默认值false。你可以启用本选项，以避免构建后的代码中出现未转译的第三方依赖。

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

image.png

10、productionSourceMap

如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建，默认值true。
项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。也就是说map文件相当于是查看源码的一个东西。如果不需要定位问题，并且不想被看到源码，就把productionSourceMap 置为false，既可以减少包大小，也可以加密源码。

image.png

11、crossorigin

设置生成的 HTML 中 和