vue.config.js配置参考_vue.config.js pages

你越是认真生活，你的生活就会越美好——弗兰克·劳埃德·莱特
《人生果实》经典语录

内容转载于Vue-Cli官网，加深印象，也方便自由调整

vue.config.js

vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。

你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。

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

// vue.config.js

/**
 * @type {import('@vue/cli-service').ProjectOptions}
 */
module.exports = {
  // 选项...
}
1
2
3
4
5
6
7
8

pages

• Type: Object
• Default: undefined
  在 multi-page 模式下构建应用。每个“page”应该有一个对应的 JavaScript 入口文件。其值应该是一个对象，对象的 key 是入口的名字，value 是：
• 一个指定了 entry, template, filename, title 和 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'
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

提示:
当在 multi-page 模式下构建时，webpack 配置会包含不一样的插件 (这时会存在多个 html-webpack-plugin 和 preload-webpack-plugin 的实例)。如果你试图修改这些插件的选项，请确认运行 vue inspect。

lintOnSave

• Type: boolean | ‘warning’ | ‘default’ | ‘error’
• Default: ‘default’

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

设置为 true 或 'warning' 时，eslint-loader 会将 lint 错误输出为编译警告。

默认情况下，警告仅仅会被输出到命令行，且不会使得编译失败。

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

设置为error将会使得 eslint-loader 把 lint 警告也输出为编译错误，这意味着 lint 警告将会导致编译失败。

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

// vue.config.js
module.exports = {
  devServer: {
    overlay: {
      warnings: true,
      errors: true
    }
  }
}
1
2
3
4
5
6
7
8
9

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

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

publicPath

从 Vue CLI 3.3 起已弃用baseUrl，请使用publicPath

• Type: string
• Default: ‘/’
  部署应用包时的基本 URL。用法和 webpack 本身的 output.publicPath 一致，但是 Vue CLI 在一些其他地方也需要用到这个值，所以请始终使用 publicPath 而不要直接修改 webpack 的 output.publicPath。

默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 https://www.my-app.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。
例如，如果你的应用被部署在 https://www.my-app.com/my-app/，则设置 publicPath 为 /my-app/。

这个值也可以被设置为空字符串 ('') 或是相对路径 ('./')，这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径，也可以用在类似 Cordova hybrid 应用的文件系统中。

相对 publicPath 的限制

相对路径的 publicPath 有一些使用上的限制。在以下情况下，应当避免使用相对 publicPath:

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

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

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/production-sub-path/'
    : '/'
}
1
2
3
4
5

outputDir

• Type: string
• Default: ‘dist’

当运行 vue-cli-service build 时生成的生产环境构建文件的目录。注意目标目录在构建之前会被清除 (构建时传入--no-clean可关闭该行为)。

提示:
请始终使用outputDir而不要修改 webpack 的 output.path。

productionSourceMap

• Type: boolean
• Default: true

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

devServer

• Type: Object

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

• 有些值像host、port 和 https可能会被命令行参数覆写。

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

使用 webpack-dev-server

使用 webpack-dev-server
webpack-dev-server 为你提供了一个简单的 web server，并且具有 live reloading(实时重新加载) 功能。设置如下：

npm install --save-dev webpack-dev-server
1

修改配置文件，告知 dev server，从什么位置查找文件：

webpack.config.js

 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');

 module.exports = {
   mode: 'development',
   entry: {
     index: './src/index.js',
     print: './src/print.js',
   },
   devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist',
  },
   plugins: [
     new HtmlWebpackPlugin({
       title: 'Development',
     }),
   ],
   output: {
     filename: '[name].bundle.js',
     path: path.resolve(__dirname, 'dist'),
     clean: true,
   },
 };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

以上配置告知 webpack-dev-server，将 dist 目录下的文件 serve 到 localhost:8080 下。（译注：serve，将资源作为 server 的可访问文件）

Tip:
webpack-dev-server 会从 output.path 中定义的目录为服务提供 bundle 文件，即，文件将可以通过 http://[devServer.host]:[devServer.port]/[output.publicPath]/[output.filename] 进行访问。

Warning:
webpack-dev-server 在编译之后不会写入到任何输出文件。而是将 bundle 文件保留在内存中，然后将它们 serve 到 server 中，就好像它们是挂载在 server 根路径上的真实文件一样。如果你的页面希望在其他不同路径中找到 bundle 文件，则可以通过 dev server 配置中的 publicPath 选项进行修改。

我们添加一个可以直接运行 dev server 的 script：

package.json

"scripts": {
    "start": "webpack serve --open"
   },
1
2
3

现在，在命令行中运行 npm start，我们会看到浏览器自动加载页面。如果你更改任何源文件并保存它们，web server 将在编译代码后自动重新加载。试试看！

开发服务器(DevServer) 具体可选配置

开发服务器(DevServer)

通过 webpack-dev-server 的这些配置，能够以多种方式改变其行为。这是一个简单的示例，利用 gzips 压缩 dist/ 目录当中的所有内容并提供一个本地服务(serve)：

// webpack.config.js
var path = require('path');

module.exports = {
  //...
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000,
  },
};
1
2
3
4
5
6
7
8
9
10
11

当服务(server)启动后，在解析模块列表之前输出一条消息：

http://localhost:9000/
webpack output is served from /build/
Content not from webpack is served from /path/to/dist/
1
2
3

这里将会给出服务启动位置以及内容的一些基本信息。

devServer.disableHostCheck

boolean

当将此项配置设置为 true 时，将会跳过 host 检查。这是不推荐的因为不检查host的应用容易受到DNS重新绑定攻击。

// webpack.config.js
module.exports = {
  //...
  devServer: {
    disableHostCheck: true,
  },
};
1
2
3
4
5
6
7

通过命令行使用

npx webpack serve --disable-host-check
1

devServer.host

string = ‘localhost’

指定要使用的 host。如果你希望服务器可从外部访问，请按以下方式进行配置：

module.exports = {
  //...
  devServer: {
    host: '0.0.0.0',
  },
};
1
2
3
4
5
6

通过命令行使用

npx webpack serve --host 0.0.0.0
1

devServer.port

number

指定端口号以侦听以下请求：

module.exports = {
  //...
  devServer: {
    port: 8080,
  },
};
1
2
3
4
5
6

通过命令行使用

npx webpack serve --port 8080
1

devServer.proxy

object [object, function]

当拥有单独的API后端开发服务器并且希望在同一域上发送API请求时，代理某些URL可能会很有用。

开发服务器使用功能强大的http-proxy-middleware软件包。 查看其 documentation 了解更多高级用法。 请注意，http-proxy-middleware 的某些功能不需要target键，例如 它的 router 功能，但是仍然需要在此处的配置中包含target，否则webpack-dev-server 不会将其传递给 http-proxy-middleware）。

使用后端在 localhost:3000 上，可以使用它来启用代理：

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': 'http://localhost:3000',
    },
  },
};
1
2
3
4
5
6
7
8

现在，对 /api/users 的请求会将请求代理到 http://localhost:3000/api/users。

如果不希望传递/api，则需要重写路径：

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        pathRewrite: { '^/api': '' },
      },
    },
  },
};
1
2
3
4
5
6
7
8
9
10
11

默认情况下，将不接受在 HTTPS 上运行且证书无效的后端服务器。 如果需要，可以这样修改配置：

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': {
        target: 'https://other-server.example.com',
        secure: false,
      },
    },
  },
};
1
2
3
4
5
6
7
8
9
10
11

有时不想代理所有内容。 可以基于函数的返回值绕过代理。

在该功能中，可以访问请求，响应和代理选项。

• 返回 null 或 undefined 以继续使用代理处理请求。
• 返回 false 会为请求产生404错误。
• 返回提供服务的路径，而不是继续代理请求。

例如。 对于浏览器请求，想要提供 HTML 页面，但是对于 API 请求，想要代理它。 可以执行以下操作：

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        bypass: function (req, res, proxyOptions) {
          if (req.headers.accept.indexOf('html') !== -1) {
            console.log('Skipping proxy for browser request.');
            return '/index.html';
          }
        },
      },
    },
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

如果想将多个特定路径代理到同一目标，则可以使用一个或多个带有 context 属性的对象的数组：

module.exports = {
  //...
  devServer: {
    proxy: [
      {
        context: ['/auth', '/api'],
        target: 'http://localhost:3000',
      },
    ],
  },
};
1
2
3
4
5
6
7
8
9
10
11

请注意，默认情况下不会代理对 root 的请求。 要启用根代理，应将 devServer.index 选项指定为虚假值：

module.exports = {
  //...
  devServer: {
    index: '', // specify to enable root proxying
    host: '...',
    contentBase: '...',
    proxy: {
      context: () => true,
      target: 'http://localhost:1234',
    },
  },
};
1
2
3
4
5
6
7
8
9
10
11
12

默认情况下，代理时会保留主机头的来源，可以将 changeOrigin 设置为 true 以覆盖此行为。 在某些情况下，例如使用 name-based virtual hosted sites，它很有用。

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
      },
    },
  },
};

1
2
3
4
5
6
7
8
9
10
11
12

devServer.progress - CLI only

boolean
默认为true

将运行进度输出到控制台。
npx webpack serve --progress

devServer.public

string

使用 inline模式 并代理 dev-server 时，内联客户端脚本并不总是知道要连接到哪里。 它将尝试基于 window.location 猜测服务器的 URL，但是如果失败，则需要使用它。

例如，开发服务器由 nginx 代理，并在 myapp.test 上可用：

module.exports = {
  //...
  devServer: {
    public: 'myapp.test:80',
  },
};
1
2
3
4
5
6

通过命令行使用

npx webpack serve --public myapp.test:80
1

devServer.publicPath

string = ‘/’

捆绑的文件将在此路径下的浏览器中可用。

假设服务器在 http://localhost:8080 下运行，并且 output.filename 设置为 bundle.js。 默认情况下，devServer.publicPath 为 ‘/’，因此的捆绑软件可以作为 http://localhost:8080/bundle.js 获得。

更改 devServer.publicPath 以将捆绑软件放在特定目录下：

module.exports = {
  //...
  devServer: {
    publicPath: '/assets/',
  },
};
1
2
3
4
5
6

该捆绑包现在将以 http://localhost:8080/assets/bundle.js 的形式提供。

Tip:
确保devServer.publicPath始终以正斜杠开头和结尾。

也可以使用完整的URL。

module.exports = {
  //...
  devServer: {
    publicPath: 'http://localhost:8080/assets/',
  },
};
1
2
3
4
5
6

该捆绑包现在将以http://localhost:8080/assets/bundle.js的形式提供。

Tip:
建议devServer.publicPath与output.publicPath相同。

chainWebpack

推荐阅读

连点成线
Vue源码学习目录

---

谢谢你阅读到了最后~
期待你关注、收藏、评论、点赞~
让我们一起 变得更强