vue.config.js 配置

文件应该导出一个包含了选项的对象:

// vue.config.js
module.exports = {
  // 选项...
}

publicPath

  • Type: string
  • Default: '/'部署应用包时的基本 URL
module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/production-sub-path/'
    : '/'
}

assetsDir

  • Type: string
  • Default: ''放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。

pages

  • Type: Object
  • Default: undefined在 multi-page 模式下构建应用。每个“page”应该有一个对应的 JavaScript 入口文件。其值应该是一个对象,对象的 key 是入口的名字,value 是:
    • 一个指定了 entrytemplatefilenametitle 和 chunks 的对象 (除了 entry 之外都是可选的);
    • 或一个指定其 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'
      }
    }
    

css.requireModuleExtension

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

css.loaderOptions

  • Type: Object
  • Default: {}向 CSS 相关的 loader 传递选项。例如:
    module.exports = {
      css: {
        loaderOptions: {
          css: {
            // 这里的选项会传递给 css-loader
          },
          postcss: {
            // 这里的选项会传递给 postcss-loader
          }
        }
      }
    }

ESLint

ESLint 可以通过 .eslintrc 或 package.json 中的 eslintConfig 字段来配置。

Babel

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

本文链接地址: vue.config.js 配置

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注