Vue.js 进阶：深入 vue-cli 配置-JavaScript中文网-JavaScript教程资源分享门户

如果你已经掌握了 Vue.js 的基本用法，那么你很可能已经开始使用 vue-cli 来建立和管理你的 Vue.js 项目了。而随着项目规模和复杂度的增加，仅仅使用默认的 vue-cli 配置可能已经不足以满足你的需求。本篇文章将深入讲解 vue-cli 的高级配置用法，帮助你更好地实现自定义的项目构建。

一、基本项目结构

如果你还不熟悉 vue-cli 的基本项目结构，可以先参考官方文档 Vue CLI - Getting Started 或者 Vue.js 实战——手把手教你搭建 Vue 项目（二）。总的来说，Vue.js 的项目结构包含如下几个核心目录和文件：

// www.javascriptcn.com code example
my-project/
├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── main.js
│   ├── App.vue
│   ├── assets/
│   │   └── ...
│   └── components/
│       └── ...
├── babel.config.js
├── package.json
├── README.md
└── vue.config.js

其中，public 目录下的文件不会被打包进最终的产品，而是直接复制到根目录下。src 目录下是应用程序的源代码。babel.config.js 是用来配置 Babel 编译器的配置文件。package.json 是应用程序的元数据和依赖关系。README.md 是项目的说明文档。vue.config.js 是 vue-cli 的高级配置文件，这个文件是本文重点讲解的目标。

二、vue-cli 的高级配置

vue-cli 高级配置可以用来针对不同的场景、不同的需求，进行自定义的项目构建。在 vue-cli 2.x 的版本中，高级配置主要是通过修改 webpack.config.js 来实现。而在 vue-cli 3.x 的版本中，高级配置则需要通过 vue.config.js 来实现。

你可以在项目根目录中建立一个空的 vue.config.js 文件，来启用 vue-cli 的高级配置：

// vue.config.js
module.exports = {

};

下面我们将详细讲解 vue-cli 最常用的高级配置选项。

1. publicPath

publicPath 用来指定项目的网站根目录。默认情况下，vue-cli 会根据 process.env.NODE_ENV 来选择使用相对路径或绝对路径作为 publicPath。如果你希望明确定义 publicPath，可以在 vue.config.js 中添加如下配置：

// vue.config.js
module.exports = {
  publicPath: '/'
};

如果你想让你的 Vue.js 项目成为一个子目录下的单页应用，可以设置 publicPath 为子目录的路径。例如，如果你的项目被部署在 /my-app/ 目录下，那么可以使用如下配置：

// vue.config.js
module.exports = {
  publicPath: '/my-app/'
};

2. outputDir

outputDir 用来指定构建输出的目录。默认情况下，vue-cli 会将构建生成的静态资源放在 dist 目录下。如果你希望指定另一个输出目录，可以在 vue.config.js 中添加如下配置：

// vue.config.js
module.exports = {
  outputDir: 'build'
};

这将会将构建生成的静态资源存放在 build 目录下。

3. devServer

devServer 用来配置开发服务器。默认情况下，vue-cli 在本地开启一个服务器，自动打开浏览器并打开你的网站。

你可以使用 devServer 来配置你的开发服务器。例如，你可以使用 proxy 来将请求转发到另一个服务器上：

// vue.config.js
module.exports = {
  devServer: {
    proxy: 'http://localhost:4000'
  }
};

4. chainWebpack

chainWebpack 用来配置 Webpack 中的插件和 Loader。默认情况下，vue-cli 添加了大量的插件和 Loader 来帮助你构建你的应用。

你可以使用 chainWebpack 来定制你的 Webpack 配置。例如，你可以增加一个 Loader 来处理 Markdown 文件：

// www.javascriptcn.com code example
// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module.rule('markdown')
      .test(/\.md$/)
      .use('html-loader')
        .loader('html-loader')
        .end()
      .use('markdown-loader')
        .loader('markdown-loader')
        .end();
  }
};

上述配置将会在 Webpack 中增加一个名为 markdown 的规则，用来处理所有 .md 后缀的文件。它用了两个 Loader，一个是 html-loader，用来将 Markdown 转换为 HTML，另一个是 markdown-loader，用来将 Markdown 编译为 JavaScript 模块。

5. configureWebpack

如果你不希望使用 chainWebpack 设置 Webpack 插件和 Loader，而是直接修改 Webpack 的配置，可以使用 configureWebpack 配置项：

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      new MyAwesomePlugin()
    ]
  }
};

上述配置将会直接修改 Webpack 配置，向其中添加一个自定义的插件。

三、高级配置示例

我们来看一个完整的 vue-cli 高级配置的示例。假设我们的 Vue.js 应用程序使用了 TypeScript，而我们希望通过 vue-cli-service build 命令来对代码进行打包并生成对应的代码映射文件。下面是个 vue.config.js 的示例：

// www.javascriptcn.com code example
// vue.config.js
const path = require('path');

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/my-app/'
    : '/',
  outputDir: 'build',
  productionSourceMap: true,
  configureWebpack: {
    devtool: 'source-map'
  },
  chainWebpack: config => {
    config.resolve.extensions
      .prepend('.ts');
    config.module.rule('ts')
      .test(/\.ts$/)
      .use('ts-loader')
        .loader('ts-loader')
        .options({
          appendTsSuffixTo: [/\.vue$/]
        });
  },
  devServer: {
    port: 8080,
    proxy: 'http://localhost:4000'
  }
};

在这个示例中，我们用 process.env.NODE_ENV 来判断生产环境和开发环境下的 publicPath。我们还指定了 outputDir、productionSourceMap 和通过 configureWebpack 中的 devtool 选项来指定 Webpack 的 Source Map 选项。

在 chainWebpack 中，我们用 prepend 方法将 .ts 文件类型添加到 resolve.extensions 中，这样 Webpack 就能识别这种文件类型了。然后我们使用了一个 ts 的规则来处理 .ts 文件，使用 ts-loader 来编译 TypeScript 代码。

在 devServer 中，我们指定了开发服务器的端口号，并使用 proxy 选项将请求转发到另一个服务器上。

结语

Vue.js 和 vue-cli 是我们日常前端开发中极为重要的工具。在掌握其基本用法的基础上，更深入的了解和掌握 vue-cli 的高级自定义配置选项，能够帮助我们更好的定制我们的项目构建，发挥出更大的生产力。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67ce3650e46428fe9e828b23

Vue.js 进阶：深入 vue-cli 配置