Vue.config.js

前言

我们在创建一个vue项目的时候，vue-cli并不会帮我们创建vue.config.js。而我在写暑假考核的时候就用到了这个东西：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-W2aTpTUC-1604371001318)(C:\Users\15998\Pictures\Saved Pictures\vue.config.js.png)]

它其实是以一个可选的配置文件，如果项目中的根目录 (和 package.json 同级的) 中存在这个文件，那么它会被 @vue/cli-service 自动加载。

也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。

关于配置(使用到的)

vue.config.js这个文件应该导出一个包含了选项的对象

publicPath

在开始的地方我们可以看到一个东西叫publicPath，下面是这个东西的基本介绍。

Type: string

Default: ‘/’

部署应用包时的基本 URL， 用法和 webpack 本身的 output.publicPath 一致。

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

其实这个就是一个公共路径，它能帮助你为项目中的所有资源指定一个基础路径。

我直接使用的是默认的路径。

outputDir

紧接着是outputDir。

Type: string

Default: ‘dist’

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

devServer

Type: Object

所有 webpack-dev-server 的选项都支持。注意：

有些值像 host、port 和 https 可能会被命令行参数覆写。

有些值像 publicPath 和 historyApiFallback 不应该被修改，因为它们需要和开发服务器的 publicPath 同步以保障正常的工作。

devServer.proxy

Type: string | Object

如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。

关于其他

如果需要观看其他的配置选项：

https://www.jianshu.com/p/b358a91bdf2d

关于proxy的基本用法：

https://www.jianshu.com/p/f489e7764cb8