vue.config.js

最新推荐文章于 2024-04-23 13:05:07 发布

小馋猫s

最新推荐文章于 2024-04-23 13:05:07 发布

阅读量632

点赞数 2

分类专栏：玩转webpack

原文链接：https://cli.vuejs.org/zh/config/#

版权

玩转webpack 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

vue.config.js配置文件解读

1. publicPath（string,默认’/’）

同webpack的 output.publicPath。
“公共路径”。
publicPath取决于网站根目录的位置，因为打包的文件都在网站根目录了，这些文件的引用都是基于该目录的。

以下情况下避免使用相对路径：

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

这个值在开发环境下同样生效。如果你想把开发服务器架设在根路径，你可以使用一个条件式的值：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/production-sub-path/'
    : '/'
}

2. outputDir（string，默认’dist’）

构建目录

运行vue-cli-service build时生成的生产环境构建文件的目录
运行该命令会先清除之前的目录（可传入 --no-clean关闭该默认行为）
vue-cli-service build --no-clean

3. assetsDir(string，默认’’)

是用来放置生成的静态资源（如js,css,img,fonts）相对于outputDir（即在dist目录下）

4. indexPath(string，默认’index.html’)

index.html输出路径。想对于outputDir

5. filenameHashing（boolean，默认true）

生成静态资源是否包含hash

6. pages（object ，默认undefined）

每个page应该有一个对应的js 入口文件

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'
  }
}

7.lintOnSave（boolean | ‘error’，默认true）

是否在开发环境下通过 eslint-loader在每次保存时 lint 代码。这个值会在@vue/cli-plugin-eslint被安装之后生效。

设置为true时，eslint-loader会将 lint 错误输出为编译警告。默认情况下，警告仅仅会被输出到命令行，且不会使得编译失败。

如果你希望让 lint 错误在开发时直接显示在浏览器中，你可以使用lintOnSave: 'error'。这会强制 eslint-loader将 lint 错误输出为编译错误，同时也意味着 lint 错误将会导致编译失败。

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

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

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

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

8.runtimeCompiler（boolean，默认true）

是否使用包含运行时编译器的Vue构建版本。设置为true后就可以在vue组件中使用template选项

9. transplieDependencies（Array<string | RegExp>，默认[ ] ）

在默认情况下，babel-loader会忽略所有node_modules下的文件
如果想通过Babel显示转译一个依赖，可以在这个选项中列出来

10. productionSourceMap（boolean，默认true）

如果不需要生产环境的source map可设置为false加速生产环境的构建

11. crossorigin （string，默认undefined）

生成HTMl中<link rel="stylesheet">和script标签的crossorigin属性
需要注意的是该选项仅影响由 html-webpack-plugin在构建时注入的标签 - 直接写在模版 (public/index.html) 中的标签不受影响。

12. integrity（boolean，默认false）

在生成的 HTML 中的和

需要注意的是该选项仅影响由 html-webpack-plugin 在构建时注入的标签 - 直接写在模版 (public/index.html) 中的标签不受影响。

另外，当启用 SRI 时，preload resource hints 会被禁用，因为 Chrome 的一个 bug 会导致文件被下载两次。

13.configureWebpack （object | function）

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

14.chainWebpack（function）

允许对内部的 webpack 配置进行更细粒度的修改。

关于configureWebpack简单配置方式：

module.exports = {
	configureWebpack: {
		plugins: [

		]
	}
}

这个configureWebpack对象最终会被webpack-merge合并到webpack配置

如果你需要基于环境有条件地配置行为，或者想要直接修改配置，那就换成一个函数 (该函数会在环境变量被设置之后懒执行)。该方法的第一个参数会收到已经解析好的配置。在函数内，你可以直接修改配置，或者返回一个将会被合并的对象：

// vue.config.js
module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 为生产环境修改配置...
    } else {
      // 为开发环境修改配置...
    }
  }
}

关于chainWebpack配置方式

使其可以定义具名的 loader 规则和具名插件，并有机会在后期进入这些规则并对它们的选项进行修改。它允许我们更细粒度的控制其内部配置

修改 Loader 选项

// vue.config.js
module.exports = {
 chainWebpack: config => {
   config.module
     .rule('vue')
     .use('vue-loader')
       .loader('vue-loader')
       .tap(options => {
         // 修改它的选项...
         return options
       })
 }
}

添加一个新的 Loader

// vue.config.js
module.exports = {
  chainWebpack: config => {
    // GraphQL Loader
    config.module
      .rule('graphql')
      .test(/\.graphql$/)
      .use('graphql-tag/loader')
        .loader('graphql-tag/loader')
        .end()
  }
}

替换一个规则里的 Loader
如果你想要替换一个已有的基础 loader，例如为内联的 SVG 文件使用 vue-svg-loader 而不是加载这个文件：

// vue.config.js
module.exports = {
  chainWebpack: config => {
    const svgRule = config.module.rule('svg')

    // 清除已有的所有 loader。
    // 如果你不这样做，接下来的 loader 会附加在该规则现有的 loader 之后。
    svgRule.uses.clear()

    // 添加要替换的 loader
    svgRule
      .use('vue-svg-loader')
        .loader('vue-svg-loader')
  }
}

修改插件选项

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config
      .plugin('html')
      .tap(args => {
        return [/* 传递给 html-webpack-plugin's 构造函数的新参数 */]
      })
  }
}

你需要熟悉 webpack-chain 的 API 并阅读一些源码以便了解如何最大程度利用好这个选项，但是比起直接修改 webpack 配置，它的表达能力更强，也更为安全。

比方说你想要将 index.html 默认的路径从 /Users/username/proj/public/index.html 改为 /Users/username/proj/app/templates/index.html。通过参考 html-webpack-plugin 你能看到一个可以传入的选项列表。我们可以在下列配置中传入一个新的模板路径来改变它：

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config
      .plugin('html')
      .tap(args => {
        args[0].template = '/Users/username/proj/app/templates/index.html'
        return args
      })
  }
}

15. css.modules

从 v4 起已弃用，请使用css.requireModuleExtension。在 v3 中，这个选项含义与 css.requireModuleExtension 相反。

16. css.requireModuleExtension（boolean，默认true）

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

如果你在 css.loaderOptions.css里配置了自定义的CSS Module选项，则 css.requireModuleExtension必须被显式地指定为true或者 false，否则我们无法确定你是否希望将这些自定义配置应用到所有 CSS 文件中。

更多细节可查阅：配合 CSS > CSS Modules

17.css.extract（boolean | object，默认生产环境下是 true，开发环境下是 false）

是否将组件中的 CSS 提取至一个独立的 CSS 文件中 (而不是动态注入到 JavaScript 中的 inline 代码)。

同样当构建 Web Components 组件时它总是会被禁用 (样式是 inline 的并注入到了 shadowRoot 中)。

当作为一个库构建时，你也可以将其设置为 false 免得用户自己导入 CSS。

提取 CSS 在开发环境模式下是默认不开启的，因为它和 CSS 热重载不兼容。然而，你仍然可以将这个值显性地设置为 true 在所有情况下都强制提取。

18.css.sourceMap（boolean，默认false）

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

19. css.loaderOptions（object，默认{}）

向 CSS 相关的 loader 传递选项。例如：

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

支持的 loader 有：

css-loader
postcss-loader
sass-loader
less-loader
stylus-loader

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

相比于使用 chainWebpack 手动指定 loader 更推荐上面这样做，因为这些选项需要应用在使用了相应 loader 的多个地方

20. devServer（object）

所有 webpack-dev-server的选项都支持。
⚠️有些值像 host、port 和 https 可能会被命令行参数覆写。

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

21. devServer.proxy（string | Object）

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

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

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

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

如果你想要更多的代理控制行为，也可以使用一个path: options成对的对象。完

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

#parallel
Type: boolean

Default: require(‘os’).cpus().length > 1

是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建。

22. pwa（object）

向 PWA插件传递选项。

23. pluginOptions（object）

这是一个不进行任何 schema 验证的对象，因此它可以用来传递任何第三方插件选项。例如：

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

24. Babel

Babel 可以通过 babel.config.js 进行配置。

Vue CLI使用了 Babel 7中的新配置格式 babel.config.js。和.babelrc或 package.json中的 babel 字段不同，这个配置文件不会使用基于文件位置的方案，而是会一致地运用到项目根目录以下的所有文件，包括 node_modules 内部的依赖。我们推荐在 Vue CLI 项目中始终使用babel.config.js取代其它格式。

所有的 Vue CLI 应用都使用 @vue/babel-preset-app，它包含了babel-preset-env、JSX支持以及为最小化包体积优化过的配置。通过它的文档可以查阅到更多细节和 preset 选项。