vue.config.js

Vue的 vue.config.js 配置

1. 为什么要配置 vue.config.js
   由于 vue-cli 3 也学习了 rollup 的零配置思路，所以项目初始化后，没有了以前熟悉的 build 目录，也就没有了 webpack.base.config.js、webpack.dev.config.js 、webpack.prod.config.js 等配置文件。
   但是有些内容需要进行相关的配置，所以我们还是要创建一个vue.config.js来进行数据修改，比如代理啥的
   2.里面的配置详解
   vue.config.js 文件是一个可选的配置文件，存放在根目录中，要是有这个文件，在@vue/cli-service 启动的时候会自动加载，所以我们在修改里面的内容之后，要进行项目重新加载。 同时你也可以在package.json中的vue字段（这里有时间在研究）
   在这里插入图片描述
   配置选项：
   首先页面里面出现这个 没有就自己写
   在这里插入图片描述
   每次在用的时候都是直接从网上找一个复制下来，用到哪个地方修改哪里，但是一直不知道具体是怎么操作，怎么使用，毕竟这关系到项目的架构，还是直接明白所有的用法靠谱，最后会写一个复制用的，但是还是顺着看完。
   首先是 publicPath
   {
   Type(类型): string
   Default(默认): ‘/‘
   }
   1.项目部署的基础路径
   2.我们默认假设你的应用将会部署在域名的根部，
   3.比如 https://www.my-app.com/
   4.如果你的应用时部署在一个子路径下，那么你需要在这里
   指定子路径。比如，如果你的应用部署在
   https://www.foobar.com/my-app/
   那么将这个值改为 /my-app/
   拓展：把开发服务器假设在根路径，可以直接使用一个判断
   publicPath :process.env.NODE_ENV === ‘production’ ? ‘/production-sub-path/‘ : ‘/‘
   outputDir (基本不动，打包目录不都是用那个吗)
   {
   Type(类型): string
   Default(默认): ‘dist’
   }
   1.将构建好的文件输出到哪里（或者说将编译的文件），当运行 vue-cli-service build 时生成的生产环境构建文件的目录。注意目标目录在构建之前会被清除 (构建时传入 —no-clean 可关闭该行为)。
   assetsDir (基本上都是默认)
   {
   Type(类型): string
   Default(默认): ‘’
   }
   1.放置生成的静态资源 (js、css、img、fonts) 的目录。
   注(我没懂)：从生成的资源覆写 filename 或 chunkFilename 时，assetsDir 会被忽略。
   indexPath (没动过)
   {
   Type(类型): string
   Default(默认): ‘index.html’
   }
   1.指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。
   filenameHashing (默认就行)
   {
   Type(类型): boolean
   Default(默认): true
   }
   1(摘录).默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存。然而，这也要求 index 的 HTML 是被 Vue CLI 自动生成的。如果你无法使用 Vue CLI 生成的 index HTML，你可以通过将这个选项设为 false 来关闭文件名哈希。
   注意：这个是比较重要的有延伸，vue感觉上侧重于单页面应用，意思就是只有一个页面，里面的操作都是通过组件的切换来完成的但是你也可以使用多页面
   单页面应用（spa）
   概念：只有一个html页面，所有跳转方式都是通过组件切换完成的。
   优点：页面之间跳转流畅、组件化开发、组件可复用、开发便捷、易维护。
   缺点：首屏加载较慢，加载整个项目中使用的css、js，SEO优化不好。
   多页面应用（mpa）
   概念：整个项目有多个html，所有跳转方式都是页面之间相互跳转的。
   优点：首屏加载较快，只加载本页所使用的的css、js，SEO优化较好。
   缺点：页面跳转较慢。
   vue 如何实现多页面应用 https://www.jianshu.com/p/eceb2ac9df90
   vue中如何配置多页面配置 https://www.jianshu.com/p/52c4913e0bf4
   pages (我相信将来我会用到的)
   {
   Type(类型): Object
   Default(默认): undefined
   }
   1.在 multi-page（多页）模式下构建应用。每个“page”应该有一个对应的 JavaScript 入口文件。
   举例子：
   // 用于多页配置，默认是 undefined
   pages: {
   index: {
   // 入口文件
   entry: ‘src/main.js’,　　/这个是根入口文件/
   // 模板文件
   template: ‘public/index.html’,
   // 输出文件
   filename: ‘index.html’,
   // 页面title
   // 当使用 title 选项时，
   // template 中的 title 标签需要是
   title: ‘Index Page’
   },
   // 简写格式
   // 模板文件默认是 public/subpage.html
   // 如果不存在，就是 public/index.html.
   // 输出文件默认是 subpage.html.
   subpage: ‘src/main.js’　　　　/注意这个是/
   },
   lintOnSave (默认)
   {
   Type(类型): boolean | ‘error’
   Default(默认): true
   }
   1. 是否在保存的时候使用 eslint-loader 进行检查。 有效的值：ture | false | "error" 当设
   置为 "error" 时，检查出的错误会触发编译失败。
   3. 是否在保存的时候使用 eslint-loader 进行检查。
   4. 有效的值：ture | false | "error"
   5. 当设置为 "error" 时，检查出的错误会触发编译失败
   runtimeCompiler (默认 我没用过)
   {
   Type(类型): boolean
   Default(默认): false
   }
   1. 是否使用带有浏览器内编译器的完整构建版本
   2. 设置为 true 后你就可以在 Vue 组件中使用 template 选项了，
   但是这会让你的应用额外增加 10kb 左右。
   transpileDependencies (没用过)
   {
   Type(类型): Array
   Default(默认): []
   }
   1. 默认情况下 babel-loader 会忽略所有 node_modules 中的文件。
   如果你想要通过 Babel 显式转译一个依赖，可以在这个选项中列出来
   3. babel-loader 默认会跳过 node_modules 依赖。
   4. 通过这个选项可以显式转译一个依赖。
   productionSourceMap (就只是知道这么个意思)
   {
   Type(类型): boolean
   Default(默认): true
   }
   1. 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
   crossorigin (不知道)
   {
   Type(类型): string
   Default(默认): undefined
   }
   1.在生成的 HTML 中的 和