vue.config.js配置

vue-cli3脚手架搭建完成后，项目目录中没有vue.config.js文件，需要手动创建

创建vue.config.js

vue.config.js是一个可选的配置文件。如果项目的根目录存在这样的文件，那么它会被@vue/cli-service自动加载，你也可以使用package.json中的vue字段，但是这种写法需要你严格按照JSON格式来写

配置vue.config.js

配置选项

publicpath

Type：string Default：’/‘ 部署应用包时的基本url，用法和webpack本身，output.publicPath一致。 默认情况下，vue-cli会假设你的应用是部署在服务器域名的根路径上，如http：//www.my-app.com/如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径，例如你的项目部署在http：//www.my-app.com/my-app/，则publicPath：设置成/my-app/ 这个值也可以被设置成空字符串(‘’),或是相对路径(‘./‘),这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径。

相对publicPath的限制

• 当使用基于HTML5 history.pushState的路由时
• 当使用pages选项构建多页面应用时

把开发服务器架设在根路径，可以使用一个条件判断：

outputdir

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

assetsDir

Type：string Default：’’ 放置生成的静态资源（js，css，img，fonts）目录

indexPath

Type：string Default：index.html 生成指定的index.html的输出路径（相对于outputdir)，也可以是个绝对路径

filenameHashing

Type：boolean Default：true 默认情况下，生成的静态资源在它们文件名中包含了hash以便更好的控制缓存，然而，这也要求index的HTML是被vue-cli自动生成的。如果你无法使用vue-cli生成的indexhtml，你可以通过将整个项目设置成false

pages

Type：object Default：undefined 在multi-page（多页）模式下构建应用，每个page都对应一个的javascript入口文件。

其值应该是一个对象，对象的key是入口的名字，value是：

一个指定了entry，template，filename，title，和chunks的对象（除了entry之外都是可选的）

lintOnSave

Type：boolean｜’error’ Default: true 是否在保存的时候使用eslint-loader进行检查，有效值是true，false，error，当设置为error时，检查出错误会触发编译失败

runtimeCompiler

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

webpack配置相关

configureWebpack

Type：Object｜Function 如果这个值，是个对象，最终会通过webpack-merge合并到最终的配置中 如果这个值是一个函数，则会接收被解析的配置作为参数。该函数可以修改配置并不返回任何东西，也可以返回一个被克隆或合并过的克隆版本

chainwebpack

Type：Function 是一个函数，会接收一个基于webpack-chain的ChainableConfig实例，允许对内部的webpack配置进行更细粒度的修改

CSS相关配置

css.modules

Type:boolean Default:false 默认情况下，只有.module.[ext]结尾的文件才会被视作CSS.modules模块，设置为true后你就可以去掉文件名中的.module并将所有的.(css|scss|sass|less|styl(us)?)文件视作为CSS module模块。

css.extract

Type:boolean|Object Default:生产环境是true，开发环境是false 是否将组件中css提取至一个独立的css文件中，而不是动态注入到javascript中的inline代码

css.sourceMap

Type:boolean Default:false 是否为 CSS 开启 source map。设置为 true 之后可能会影响构建的性能。

css.loaderOptions

Type:object Default:{} 向 CSS 相关的 loader 传递选项。

支持的loader有：

css-loader postcss-loader sass-loader less-loader styls-loader

devServer

Type：Object 所有webpack-dev-server的选项都支持。注意： 有些值像host，port和https可能会被命令行参数覆写 有些值像publicPath和historyApiFallBack不应该被修改，因为他们需要和开发服务器的publicPath同步以保障正常工作

devServer.proxy

如果你的前端应用没有和后端api服务器没有运行在同一台主机上，你需要在开发环境