vue/cli 自定义配置

**Vue CLI 自定义配置**

Vue CLI 是一个用于创建、开发和部署 Vue.js项目的命令行工具。它提供了许多预设配置选项，帮助我们快速创建和管理 Vue项目。但是，有时我们可能需要根据自己的需求进行自定义配置。

在本文中，我们将介绍如何使用 Vue CLI 自定义配置来满足我们的需求。

### 一、什么是Vue CLI 自定义配置Vue CLI 自定义配置是一种通过 `vue.config.js` 文件来覆盖或扩展 Vue CLI 的默认行为的方式。这个文件可以包含各种自定义选项，例如构建设置、代理服务器、环境变量等。

### 二、创建一个新项目并配置自定义选项首先，我们需要使用 Vue CLI 创建一个新项目：

bashvue create my-project

然后，我们可以在 `my-project` 目录下创建一个 `vue.config.js` 文件，来覆盖或扩展 Vue CLI 的默认行为。

例如，我们可以在这个文件中配置构建设置：

javascript// vue.config.jsmodule.exports = {
 // 构建设置 publicPath: './',
 outputDir: 'dist',
 assetsPublicPath: './',
 indexPath: 'index.html',
 filenameHashing: true,
 chainWebpack(config) {
 config.module.rule('svg').exclude.add(/.vue$/);
 return config;
 },
};

在这个例子中，我们覆盖了 Vue CLI 的默认构建设置，指定了 `publicPath`、`outputDir`、`assetsPublicPath` 和 `indexPath` 等选项。

### 三、配置代理服务器代理服务器是用于转发请求的服务器。我们可以使用 Vue CLI 自定义配置来配置代理服务器。

例如，我们可以在 `vue.config.js` 文件中添加以下代码：

javascript// vue.config.jsmodule.exports = {
 // 构建设置 publicPath: './',
 outputDir: 'dist',
 assetsPublicPath: './',
 indexPath: 'index.html',
 filenameHashing: true,
 chainWebpack(config) {
 config.module.rule('svg').exclude.add(/.vue$/);
 return config;
 },
 //代理服务器 devServer: {
 proxy: {
 '/api': {
 target: ' /> changeOrigin: true,
 pathRewrite: { '^/api': '' },
 },
 },
 },
};

在这个例子中，我们配置了一个代理服务器，转发 `/api` 请求到 ` />
### 四、使用环境变量环境变量是用于存储应用程序运行时的设置信息。我们可以使用 Vue CLI 自定义配置来使用环境变量。

例如，我们可以在 `vue.config.js` 文件中添加以下代码：

javascript// vue.config.jsmodule.exports = {
 // 构建设置 publicPath: './',
 outputDir: 'dist',
 assetsPublicPath: './',
 indexPath: 'index.html',
 filenameHashing: true,
 chainWebpack(config) {
 config.module.rule('svg').exclude.add(/.vue$/);
 return config;
 },
 // 环境变量 env: {
 NODE_ENV: process.env.NODE_ENV || 'development',
 API_URL: ' /> },
};

在这个例子中，我们定义了两个环境变量 `NODE_ENV` 和 `API_URL`，并使用它们来配置应用程序。

### 五、总结Vue CLI 自定义配置是一种通过 `vue.config.js` 文件来覆盖或扩展 Vue CLI 的默认行为的方式。我们可以在这个文件中配置构建设置、代理服务器和环境变量等选项。通过使用 Vue CLI 自定义配置，我们可以根据自己的需求创建和管理 Vue项目。

**参考资料**

* [Vue CLI 文档]( />* [vue.config.js 文件说明](