VUE-CLI可选的配置文件 vue.config.js
整理自官方文档,仅供博文/qq_28550263/article/details/120633610 引用及做查询参考。
格式
// vue.config.jsmodule.exports = {// 配置项...}
文档
一个指定其entry
的字符串示例: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` 访问这些选项。}}}