Vue.js 定义 Vue CLI 配置
今天我们来聊聊如何定义和配置 Vue CLI 项目。Vue CLI 是 Vue.js 官方提供的脚手架工具，能够帮助我们快速搭建项目结构，并提供了丰富的配置选项。
1. 创建 Vue CLI 项目
首先，确保你已经全局安装了 Vue CLI。可以在终端运行以下命令来检查：
vue --version
如果没有安装，可以执行：
npm install -g @vue/cli
接下来，使用以下命令创建一个新的 Vue 项目：
vue create my-vue-app
在创建过程中，CLI 会提示你选择预设配置。你可以选择默认配置，或者手动选择需要的功能。如果你选择手动配置，可以在后续的步骤中选择需要的插件和功能。
2. 定义和修改 vue.config.js
在项目根目录下，你可以创建一个 vue.config.js 文件来进行自定义配置。这个文件用于修改 webpack 的内部配置，调整开发服务器设置，或者修改其他构建相关的选项。
例如，创建一个 vue.config.js 文件，内容如下：
module.exports = {publicPath: process.env.NODE_ENV === 'production' ? '/my-app/' : '/',devServer: {proxy: {'/api': {target: 'http://localhost:3000',changeOrigin: true,},},},
};
在这个配置中：
publicPath：设置应用的公共路径。在生产环境下，应用被部署在/my-app/路径下。devServer.proxy：配置开发服务器的代理，将所有以/api开头的请求代理到http://localhost:3000，解决跨域问题。
3. 使用插件扩展功能
Vue CLI 提供了丰富的插件系统，允许你在项目中添加各种功能，如路由、状态管理、PWA 等。你可以使用 vue add 命令来安装插件。
例如，添加 Vue Router 插件：
vue add router
这将自动安装并配置 Vue Router，生成路由文件和必要的组件结构。
4. 配置插件选项
在安装插件时，你可以通过命令行选项来配置插件的行为。例如，添加 ESLint 插件并选择配置：
vue add eslint --config airbnb --lintOn save
这将安装 ESLint 插件，使用 Airbnb 的配置，并在保存时进行代码检查。
5. 使用 defineConfig 获取更好的类型提示
在 vue.config.js 中，你可以使用 defineConfig 函数来获取更好的类型提示：
const { defineConfig } = require('@vue/cli-service');module.exports = defineConfig({// 你的配置项
});
这将提供更好的开发体验，尤其是在使用 TypeScript 时。
总结
通过创建和配置 vue.config.js 文件，你可以自定义 Vue CLI 项目的构建和开发设置。结合插件系统，你可以轻松地扩展项目功能，满足不同的开发需求。
