0Pricing
Vue Academy · 课时

CLI 配置与插件

配置 CLI，并添加插件来扩展项目功能

CLI 配置与插件 是 CoddyKit 上的免费 Vue Academy 课时。 这是第 3 节课，共 3 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 3 节课。

配置构建

Vue CLI 和 Vite 都允许您通过配置文件自定义构建过程。

  • Vue CLI 使用 vue.config.js
  • Vite 使用 vite.config.js

您可以在这里添加插件、设置别名、配置开发服务器等。

vite.config.js 基础

典型的 vite.config.js 会导入 Vue 插件，并导出一个配置对象。

import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000
  }
})

vue.config.js 基础

对于 Vue CLI 项目，vue.config.js 也会以相同方式导出配置。

const { defineConfig } = require("@vue/cli-service")

module.exports = defineConfig({
  devServer: {
    port: 8080
  }
})

添加插件

插件通过新增功能扩展构建过程。

  • 使用 npm 安装
  • 在配置文件中导入
  • 添加到 plugins 数组中
import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"
import vueJsx from "@vitejs/plugin-vue-jsx"

export default defineConfig({
  plugins: [vue(), vueJsx()]
})

环境变量

将不同环境之间会变化的配置存储在 .env 文件中。

  • .env 在所有环境中加载
  • .env.development 仅用于开发环境
  • .env.production 用于生产构建

定义环境变量

在 Vite 中，变量必须以 VITE_ 开头，才能暴露给客户端代码。

# .env file
VITE_API_URL=https://api.example.com
VITE_APP_TITLE=My App

读取环境变量

在 Vite 中，通过 import.meta.env 访问已暴露的变量。

const apiUrl = import.meta.env.VITE_API_URL
console.log(apiUrl)
// https://api.example.com

环境变量安全提示

暴露给客户端代码的任何内容都会在浏览器中可见。

  • 绝不要将私有 API 密钥等机密信息放入 VITE_ 变量
  • 这里只应存放公开且不敏感的配置
  • 真正的机密信息应保存在服务器上

路径别名

别名可以缩短导入路径。常见做法是将 @ 映射到 src 文件夹。

这样可以避免使用 ../../components 这类脆弱的相对路径。

import { fileURLToPath, URL } from "node:url"
import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url))
    }
  }
})

使用别名

配置完成后，使用 @/ 代替相对路径进行导入。

// Without alias
import Button from "../../components/Button.vue"

// With @ alias
import Button from "@/components/Button.vue"

开发服务器选项

配置文件还可以调整开发服务器：

  • port 要监听的端口
  • open 自动打开浏览器
  • proxy 转发 API 请求以避免 CORS
export default defineConfig({
  server: {
    port: 3000,
    open: true,
    proxy: {
      "/api": "http://localhost:8000"
    }
  }
})

快速检查

测试您对 Vite 配置的理解。

回顾：配置和插件

您学会了如何配置 Vue 项目：

  • vite.config.js 或 vue.config.js 存放设置
  • 将插件添加到 plugins 数组中
  • 使用带有 VITE_ 前缀的 .env 文件
  • 通过 import.meta.env 读取它们
  • 设置 @ 别名以便进行简洁的导入

接下来：模板语法和数据绑定。

常见问题解答

「CLI 配置与插件」课时是免费的吗？

是的 — 「CLI 配置与插件」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 3 节课。

「CLI 配置与插件」这节课中我会学到什么？

配置 CLI，并添加插件来扩展项目功能 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 3 节。

「CLI 配置与插件」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Vue Academy 课中编写并运行代码吗？

能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 安装 Vue CLI
  2. 生成的项目结构
  3. CLI 配置与插件
← 返回 Vue Academy