VUE-CLI可选的配置文件 vue.config.js

整理自官方文档，仅供博文/qq_28550263/article/details/120633610 引用及做查询参考。

格式

// vue.config.jsmodule.exports = {// 配置项...}

文档

module.exports = {pages: {index: {// page 的入口entry: 'src/index/main.js',// 模板来源template: 'public/index.html',// 在 dist/index.html 的输出filename: 'index.html',// 当使用 title 选项时，// template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>title: 'Index Page',// 在这个页面中包含的块，默认情况下会包含// 提取出来的通用 chunk 和 vendor chunk。chunks: ['chunk-vendors', 'chunk-common', 'index']},// 当使用只有入口的字符串格式时，// 模板会被推导为 `public/subpage.html`// 并且如果找不到的话，就回退到 `public/index.html`。// 输出文件名会被推导为 `subpage.html`。subpage: 'src/subpage/main.js'}}

或者，你也可以通过设置让浏览器 overlay 同时显示警告和错误：

// vue.config.jsmodule.exports = {devServer: {overlay: {warnings: true,errors: true}}}

当lintOnSave是一个 truthy 的值时，eslint-loader在开发和生产构建下都会被启用。如果你想要在生产构建时禁用eslint-loader，你可以用如下配置：

// vue.config.jsmodule.exports = {lintOnSave: process.env.NODE_ENV !== 'production'}

例如：

module.exports = {css: {loaderOptions: {css: {// 这里的选项会传递给 css-loader},postcss: {// 这里的选项会传递给 postcss-loader}}}}

支持的 loader 有：

css-loaderpostcss-loadersass-loaderless-loaderstylus-loader

另外，也可以使用scss选项，针对scss语法进行单独配置（区别于sass语法）。

devServer.proxy可以是一个指向开发环境 API 服务器的字符串：

module.exports = {devServer: {proxy: 'http://localhost:4000'}}

这会告诉开发服务器将任何未知请求 (没有匹配到静态文件的请求) 代理到http://localhost:4000。

如果你想要更多的代理控制行为，也可以使用一个path: options成对的对象。完整的选项可以查阅 http-proxy-middleware 。

module.exports = {devServer: {proxy: {'/api': {target: '<url>',ws: true,changeOrigin: true},'/foo': {target: '<other_url>'}}}}

例如：

// vue.config.jsmodule.exports = {// ...other vue-cli plugin options...pwa: {name: 'My App',themeColor: '#4DBA87',msTileColor: '#000000',appleMobileWebAppCapable: 'yes',appleMobileWebAppStatusBarStyle: 'black',// configure the workbox pluginworkboxPluginMode: 'InjectManifest',workboxOptions: {// swSrc is required in InjectManifest mode.swSrc: 'dev/sw.js',// ...other Workbox options...}}}

例如：

module.exports = {pluginOptions: {foo: {// 插件可以作为 `options.pluginOptions.foo` 访问这些选项。}}}