Vue.config.js 配置项

最新推荐文章于 2024-07-25 07:30:00 发布

有人偷包谷

最新推荐文章于 2024-07-25 07:30:00 发布

阅读量906

点赞数 1

分类专栏： vue 文章标签： vue.js javascript 前端开发语言前端框架

本文链接：https://blog.csdn.net/czyrtbg/article/details/131034293

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Vue.config.js 学习

vue.config.js 是什么？

他是vue项目的可选配置文件，在启动vue项目时会自动加载（修改该配置文件后，需重启vue项目。）

属性

productionSourceMap （布尔值）

是否需要将每一个js文件都多生成一个 .map文件。true：生成、false：不生成

因为打包后为压缩代码体积，都会进行压缩加密处理。如果出现报错情况，不好知道问题报错的位置，那么.map就可以准确的输出错误行。但是使用productionSourceMap会大大加代码的体积。

publicPath （字符串路径）

部署路径：默认打包打包到根目录，例如：百度一下，你就知道，如果该运用需要部署到子路由上，如：https://www.baidu.com/mode/ ，则将publicPath：/mode/

outputDir（字符串）

当运行 vue-cli-service build 时，默认会将outputDir的值作为文件容器进行打包，默认：outputDir: 'dist'

assetsDir（字符串）

用于打包后存放静态资源（ js、css、img、fonts ）的文件容器名称（相对 outputDir 目录内）

indexPath（字符串路径）

指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。

filenameHashing（布尔值）

在 vue-cli-service build 时，是否将文件名追加hash值：如：mode.f123123d.js·以便更好的控制缓存

注意：这也要求 index 的 HTML 是被 Vue CLI 自动生成的。如果你无法使用 Vue CLI 生成的 index HTML，你可以通过将这个选项设为 false 来关闭文件名哈希

pages（对象）

理解：每一个页面应用、组件都有它对应的（css、js、html）入口，通过 pages 我们可以设置每个页面或组件的文件入口。

事例：

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

*lintOnSave （布尔值| 'warning' | 'default' | 'error'）

设置是否在开发环境下每次保存代码时都启用 eslint 验证。

false：关闭每次保存都进行检测 true：开启每次保存都进行检测，效果与warning一样 ‘warning’：开启每次保存都进行检测，lint 错误将显示到控制台命令行，而且编译并不会失败。 ‘error’：开启每次保存都进行检测，lint 错误将显示到浏览器页面上，且编译失败。 ‘default’：同’error’

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

module.exports = {
  devServer: {
    overlay: {
      warnings: true,
      errors: true
    }
  }
}
也可以根据环境判断开启关闭：

module.exports = {
  lintOnSave: process.env.NODE_ENV !== 'production'
}

runtimeCompiler（布尔值）

他有两种状态：

true：Runtime + Compiler: （运行程序+编译器:推荐给大多数用户）

fasle：默认 Runtime-only：比上面那种模式轻大约 6KB min+gzip，但是 template (或任何特定于vue的html)只允许在.vue文件中使用——其他地方用需要 render 函数

所以建议选择Runtime-only编译方式，压缩体积小运行速度快

解析步骤也有区别：

Runtime + Compiler中，vue对template的解析方式：template -> ast （abstract syntax tree） -> render -> 虚拟dom ->真实dom

Runtime-only则会省略前面2步：render -> 虚拟dom ->真实dom

只要到真实dom完成后界面才会进行展示

transpileDependencies（boolean | Array<string | RegExp>）

默认情况下 babel-loader 会忽略所有 node_modules 中的文件。你可以启用本选项，以避免构建后的代码中出现未转译的第三方依赖。

不过，对所有的依赖都进行转译可能会降低构建速度。如果对构建性能有所顾虑，你可以只转译部分特定的依赖：给本选项传一个数组，列出需要转译的第三方包包名或正则表达式即可。

babel-loader? 他是等包实现es6转es5语法的工具

需要兼容老ie的可能会有帮助

productionSourceMap（布尔值）

如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。

是否在生产环节生产 .map 文件

crossorigin（字符串）

设置生成的 HTML 中 <link rel="stylesheet"> 和 <script> 标签的 crossorigin 属性。

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

因为使用的比较少一般不用去设置

integrity（布尔值）

在生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 标签上启用 Subresource Integrity (SRI)。如果你构建后的文件是部署在 CDN 上的，启用该选项可以提供额外的安全性。

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

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

同上

configureWebpack（Object | Function）

如果这个值是一个对象，则会通过 webpack-merge 合并到最终的配置中。

如果这个值是一个函数，则会接收被解析的配置作为参数。该函数既可以修改配置并不返回任何东西，也可以返回一个被克隆或合并过的配置版本。

与webpack 配合使用

chainWebpack（Function）

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

css.modules

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

css.requireModuleExtension（布尔值）

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

css.extract（布尔值）

生产环境下是 true，开发环境下是 false

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

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

css.sourceMap（布尔值）

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

css.loaderOptions（Object）

案例：

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

向 CSS 相关的 loader 传递选项，支持的loader：

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

devServer（Object）

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

有些值像 host、port 和 https 可能会被命令行参数覆写。
有些值像 publicPath 和 historyApiFallback 不应该被修改，因为它们需要和开发服务器的 publicPath 同步以保障正常的工作。

devServer.proxy（string | Object）

用于前后端交互，解决同源策略问题的：你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。

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

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

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

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

parallel （布尔值）

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

pwa（布尔值）

PWA 插件传递选项

不常用

pluginOptions（Object）

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

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