vue.config.js(1)初窥门径

官方地址

有些针对 @vue/cli 的全局配置，例如你惯用的包管理器和你本地保存的 preset，都保存在 home 目录下一个名叫 .vuerc 的 JSON 文件。你可以用编辑器直接编辑这个文件来更改已保存的选项。

你也可以使用 vue config 命令来审查或修改全局的 CLI 配置。

vue.config.js文件如果没有,可以手动创建.

1. publicPath：设置资源的路径，如果首页为https://www.my-app.com/ 应用在https://www.my-app.com/my-app/ 则publicPath 应为 /my-app/。

Type: string，Default: '/'，可以为空。即相对路径。
module.exports={
           publicPath:process.env.NODE_ENV
            ==='production'  ?  '/production-sub-path/'   :   '/'}

2. outputDir：当运行 vue-cli-service build 时生成的生产环境构建文件的目录。注意目标目录在构建之前会被清除 (构建时传入 --no-clean 可关闭该行为)。

Type: string    Default: 'dist'

3. assetsDir：放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。

Type: string   Default: ''

4. indexPath：指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。

Type: string   Default: 'index.html'

5. filenameHashing：生成的静态资源包含了hash值，用于缓存，但是也需要你的index.html是由VueCli生成，可以设置为false。

Type: boolean  Default: true

6. pages:以多页面模式构建应用程序时需要(太菜了,暂时用不到).
7. lintOnSave:是否需要每次保存时都扫描代码查错,(一个工具,以后看)
8. runtimeCompiler:没啥用 默认为Default: false
   
   image.png
   
   runtimeonly:以.vue文件的形式开发,更好用
   
   image.png
9. transpileDependencies:涉及到了node_modules文件夹(第三个以后)
10. productionSourceMap:生成一个map文件,map文件的作用在于：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。也就是说map文件相当于是查看源码的一个东西。如果不需要定位问题，并且不想被看到源码，就把productionSourceMap 置为false，既可以减少包大小，也可以加密源码。(第4个)
11. crossorigin:只有当你的网页域名和要载入的静态文件存放的站点域名不一样的时候,才有意义(第5个)
12. integrity:提高安全性(等以后)
13. configureWebpack: Type: Object | Function(一个很有用,但是比较复杂的属性,以后再说)
14. chainWebpack:修改内部的webpack配置(第7个)
15. css.requireModuleExtension:默认情况下，只有 *.module.[ext] 结尾的文件才会被视作 CSS Modules 模块。设置为 false 后你就可以去掉文件名中的 .module 并将所有的 *.(css|scss|sass|less|styl(us)?) 文件视为 CSS Modules 模块。

Type: boolean    Default: true

16. css.extract:将组件内的所有css提取出来组合成一个文件.

Type: boolean | Object    Default: 生产环境下是 true，开发环境下是 false

17. css.sourceMap:是否为 CSS 开启 source map。设置为 true 之后可能会影响构建的性能。(map文件用来看源码,不管他)
18. css.loaderOptions:向 CSS 相关的 loader 传递选项(以后专门研究,第8个)
19. devServer:一个比较有用的服务器配置属性,可以配置打开网页的端口,是否自动打开等等(第9个)
20. devServer.proxy:上面的属性的一个子属性
21. parallel:生产构建时有用,build,可以用来提高效率.
22. pwa:给pwa插件传递选项(第10个)
23. pluginOptions:给所用插件提供选项,即一些公共参数.

// 定义一些公用参数，以供项目中使用
const pluginOptions = {
  // 项目名，定义成我们在云平台申请的应用名，类似 ***.vivo.com.cn
  projectName: 'huwd',
  // 本地ip
  host: ip.address(),
  // 定义端口
  port: 8080,
  // 登录的地址，需要一个client_id
  loginPath: 'https://psport.deio.com.cn/v3/web/login/authorze?client_id={client_id}',
  // 埋点上报的地址
  stPath: 'https://st-demss.reso.com.cn',
  // CDN域名，在云平台申请到的项目静态资源域名
  cdnPath: '/'
}

以上就是目前所有的选项
最后总结一下:当前时间2020.12.4,上述选项共23个,其中现在需要简单理解或简单记忆的有

publicPath(放置的路径),outputDir(输出路径),assetsDir(生成静态资源的路径),
indexPath(index.html的路径)filenameHashing(有关hash值),
runtimeCompiler(模板),runtimeonly,
css.extract(css提取).共7个

未来需要深入学习的有(优先级由高到低):

configureWebpack,css.loaderOptions
pluginOptions,devServer,devServer.proxy
css.requireModuleExtension,parallel
productionSourceMap,css.sourceMap
pwa,chainWebpack
pages,lintOnSave,transpileDependencies,

找到实习(皇天不负有心人)以后看情况的:

crossorigin(需要服务器),integrity(安全性),