Vue.js 定义 Vue CLI 配置

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 项目的构建和开发设置。结合插件系统，你可以轻松地扩展项目功能，满足不同的开发需求。