云信AI部署

一文掌握GitHub热门开源项目Vite（macOS Big Sur版）

云信安装大师
90
AI 质量分
11 5 月, 2025
2 分钟阅读
0 阅读

一文掌握GitHub热门开源项目Vite（macOS Big Sur版）

引言

Vite是当下最热门的前端构建工具之一，由Vue.js作者尤雨溪开发。它以极快的启动速度和热更新著称，特别适合现代前端开发。本文将带你从零开始在macOS Big Sur系统上安装和使用Vite，并创建一个完整的示例项目。

准备工作

在开始之前，请确保你的macOS Big Sur系统满足以下要求：

  1. Node.js版本 ≥ 12.0.0
  2. npm或yarn包管理器
  3. 基本的命令行操作知识

第一步：安装Node.js

Vite需要Node.js环境支持。我们推荐使用nvm(Node Version Manager)来管理Node版本：

代码片段 
# 安装nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

# 重新加载终端配置
source ~/.zshrc  # 如果你使用zsh
# 或 source ~/.bash_profile # 如果你使用bash

# 安装最新LTS版本的Node.js
nvm install --lts

# 验证安装
node -v
npm -v

注意事项：
– 如果遇到权限问题，可以在命令前加上sudo
– macOS Big Sur默认使用zsh作为终端shell

第二步：创建Vite项目

现在我们可以使用Vite提供的脚手架快速创建项目：

代码片段 
# 使用npm创建项目（推荐）
npm create vite@latest my-vite-app --template vue

# 或者使用yarn
yarn create vite my-vite-app --template vue

参数解释：
– my-vite-app：你的项目名称
– --template vue：指定使用Vue模板（可选react、vanilla等）

第三步：进入项目并安装依赖

代码片段 
cd my-vite-app
npm install # 或 yarn install

第四步：启动开发服务器

代码片段 
npm run dev # 或 yarn dev

启动后，终端会显示本地服务器地址（通常是http://localhost:3000），在浏览器中打开即可看到默认页面。

原理说明：
– Vite在开发模式下不打包代码，而是直接启动一个原生ES模块服务器
– 浏览器直接请求源码文件，Vite按需转换和返回文件内容

Vite项目结构解析

让我们看看生成的目录结构：

代码片段 
my-vite-app/
├── node_modules/     # 依赖包目录
├── public/           # 静态资源目录（不会被编译）
├── src/
│   ├── assets/       # CSS、图片等资源文件
│   ├── components/   # Vue组件目录 
│   ├── App.vue       # Vue根组件 
│   └── main.js       # Vue应用入口文件 
├── index.html        # HTML入口文件 
├── package.json      # npm配置文件 
└── vite.config.js    # Vite配置文件

Vite配置详解

打开vite.config.js文件，我们可以看到基本配置：

代码片段 
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
})

你可以根据需要添加更多配置项：

“`javascript
export default defineConfig({
plugins: [vue()],

// 自定义服务器选项
server: {
port: 8080, // 自定义端口号

代码片段 
// macOS本地开发时可能需要配置代理解决跨域问题  
proxy: {
  '/api': {
    target: 'http://your-api-server.com',
    changeOrigin: true,
    rewrite: path => path.replace(/^\/api/, '')
  }
}

// macOS特定优化 - fs.watch监听更多文件变化  
watch: {
  usePolling: true,
  interval: 1000,
  binaryInterval: 3000,
}

// macOS Big Sur可能需要设置主机名  
host: '0.0.0.0'

// HTTPS配置（可选）
https: {
  key: fs.readFileSync('path/to/key.pem'),
  cert: fs.readFileSync('path/to/cert.pem'),
}

// macOS下自动打开浏览器  
open: true,

// macOS下启用热更新优化  
hmr: {
  overlay: false,
  protocol: 'ws',
  host: 'localhost',
  port: '3000'
}

// macOS下更快的预构建优化  
optimizeDeps: {
  include: ['vue', 'vue-router', 'pinia']
}

// macOS下更快的构建输出  
build: {
  minify: 'terser',
  terserOptions: {
    compress: {
      drop_console: true,
      drop_debugger: true,
    },
  },

  // Rollup构建选项  
  rollupOptions: {
    output:{
      manualChunks(id) {
        if (id.includes('node_modules')) {
          return id.toString().split('node_modules/')[1].split('/')[0].toString();
        }
      }
    }
  },

  chunkSizeWarningLimit: 1000, // KB单位  

  // macOS下更快的源映射生成方式  
  sourcemap:'hidden'
原创 高质量