【Vue】CLI与Vite工程化配置

最新推荐文章于 2025-05-09 16:59:56 发布
最新推荐文章于 2025-05-09 16:59:56 发布
阅读量1k 收藏 25
点赞数 16
CC 4.0 BY-SA版权
分类专栏： Vue 文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Go_ahead1025/article/details/147465462

在这里插入图片描述

个人主页：Guiat
归属专栏：Vue

在这里插入图片描述

文章目录

正文

1. Vue CLI 工程化配置

1.1 Vue CLI 简介与安装

Vue CLI 是基于 webpack 构建的标准化工具链，用于快速搭建 Vue.js 项目。

# 安装 Vue CLI
npm install -g @vue/cli

# 查看版本
vue --version

# 创建项目
vue create my-project

1.2 项目结构

my-project/
├── node_modules/       # 依赖包
├── public/             # 静态资源
│   ├── favicon.ico     
│   └── index.html      # HTML 模板
├── src/                # 源代码
│   ├── assets/         # 资源文件
│   ├── components/     # 组件
│   ├── views/          # 视图
│   ├── App.vue         # 根组件
│   ├── main.js         # 入口文件
│   ├── router.js       # 路由配置
│   └── store.js        # 状态管理
├── .browserslistrc     # 浏览器兼容配置
├── .eslintrc.js        # ESLint 配置
├── babel.config.js     # Babel 配置
├── package.json        # 项目依赖
└── vue.config.js       # Vue CLI 配置

1.3 vue.config.js 配置详解

module.exports = {
  publicPath: '/',
  outputDir: 'dist',
  assetsDir: 'static',
  lintOnSave: process.env.NODE_ENV !== 'production',
  productionSourceMap: false,
  
  devServer: {
    port: 8080,
    open: true,
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: { '^/api': '' }
      }
    }
  },
  
  configureWebpack: {
    // webpack 配置
  },
  
  chainWebpack: config => {
    // 链式 webpack 配置
  }
}

1.4 环境变量配置

# .env.development
VUE_APP_API_URL=http://dev-api.example.com

# .env.production
VUE_APP_API_URL=http://api.example.com

在代码中使用：

console.log(process.env.VUE_APP_API_URL)

2. Vite 工程化配置

2.1 Vite 简介与安装

Vite 是下一代前端构建工具，提供更快的开发服务器启动和即时的模块热更新。

# 使用 npm
npm create vite@latest my-vite-project -- --template vue

# 使用 yarn
yarn create vite my-vite-project --template vue

# 使用 pnpm
pnpm create vite my-vite-project --template vue

2.2 项目结构

my-vite-project/
├── node_modules/       # 依赖包
├── public/             # 静态资源
│   └── favicon.ico     
├── src/                # 源代码
│   ├── assets/         # 资源文件
│   ├── components/     # 组件
│   ├── App.vue         # 根组件
│   └── main.js         # 入口文件
├── .gitignore          # Git 忽略文件
├── index.html          # HTML 入口
├── package.json        # 项目依赖
├── vite.config.js      # Vite 配置
└── README.md           # 项目说明

2.3 vite.config.js 配置详解

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

export default defineConfig({
  plugins: [vue()],
  
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  },
  
  server: {
    port: 3000,
    open: true,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, '')
      }
    }
  },
  
  build: {
    outDir: 'dist',
    assetsDir: 'assets',
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true
      }
    }
  },
  
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/styles/variables.scss";`
      }
    }
  }
})

2.4 环境变量配置

# .env
VITE_APP_TITLE=My App

# .env.development
VITE_APP_API_URL=http://dev-api.example.com

# .env.production
VITE_APP_API_URL=http://api.example.com

在代码中使用：

console.log(import.meta.env.VITE_APP_API_URL)

3. Vue CLI 与 Vite 性能对比

3.1 启动时间对比

工具冷启动时间热启动时间
Vue CLI8-15秒2-5秒
Vite300ms以内100ms以内

3.2 构建时间对比

工具小型项目中型项目大型项目
Vue CLI10-20秒30-60秒1-3分钟
Vite5-10秒15-30秒30-90秒

3.3 HMR(热更新)速度对比

工具组件更新样式更新
Vue CLI300-800ms200-500ms
Vite50-100ms20-50ms

4. 迁移策略：从 Vue CLI 到 Vite

4.1 依赖调整

// package.json
{
  "devDependencies": {
-   "@vue/cli-service": "^5.0.0",
+   "vite": "^4.0.0",
+   "@vitejs/plugin-vue": "^4.0.0"
  }
}

4.2 配置文件转换

// 从 vue.config.js
module.exports = {
  publicPath: '/',
  outputDir: 'dist',
  devServer: {
    port: 8080
  }
}

// 转换为 vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  base: '/',
  build: {
    outDir: 'dist'
  },
  server: {
    port: 8080
  }
})

4.3 入口文件调整

<!-- 新增 index.html 作为入口 -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="icon" href="/favicon.ico">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vite App</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>
</html>

4.4 环境变量前缀修改

- VUE_APP_API_URL=http://api.example.com
+ VITE_API_URL=http://api.example.com

// 在代码中
- console.log(process.env.VUE_APP_API_URL)
+ console.log(import.meta.env.VITE_API_URL)

5. 高级配置与优化

5.1 构建优化

// vite.config.js
export default defineConfig({
  build: {
    // 启用/禁用 CSS 代码拆分
    cssCodeSplit: true,
    
    // 构建后是否生成 source map 文件
    sourcemap: false,
    
    // 指定生成静态资源的存放路径
    assetsDir: 'assets',
    
    // 小于此阈值的导入或引用资源将内联为 base64 编码
    assetsInlineLimit: 4096,
    
    // 启用/禁用 brotli 压缩大小报告
    brotliSize: true,
    
    // chunk 大小警告的限制
    chunkSizeWarningLimit: 500,
    
    // 自定义底层的 Rollup 打包配置
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['vue', 'vue-router', 'vuex'],
          ui: ['element-plus']
        }
      }
    }
  }
})

5.2 预构建依赖优化

// vite.config.js
export default defineConfig({
  optimizeDeps: {
    // 预构建的依赖项
    include: ['vue', 'vue-router', 'vuex', 'axios'],
    
    // 排除预构建的依赖项
    exclude: ['your-package'],
    
    // 强制预构建链接的包
    entries: [],
    
    // 启用依赖项预构建的缓存
    force: true
  }
})

5.3 CSS 预处理器配置

// vite.config.js
export default defineConfig({
  css: {
    // 是否开启 CSS 的 source map
    devSourcemap: true,
    
    // CSS 预处理器配置
    preprocessorOptions: {
      scss: {
        additionalData: `
          @import "@/styles/variables.scss";
          @import "@/styles/mixins.scss";
        `
      },
      less: {
        javascriptEnabled: true,
        modifyVars: {
          '@primary-color': '#1890ff'
        }
      }
    },
    
    // PostCSS 配置
    postcss: {
      plugins: [
        require('autoprefixer'),
        require('postcss-preset-env')
      ]
    }
  }
})

5.4 多页面应用配置

// vite.config.js
export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        main: path.resolve(__dirname, 'index.html'),
        admin: path.resolve(__dirname, 'admin.html')
      }
    }
  }
})

6. 插件系统

6.1 常用 Vue CLI 插件

# 添加 TypeScript 支持
vue add typescript

# 添加 Vuex 支持
vue add vuex

# 添加 Vue Router 支持
vue add router

# 添加 ESLint 支持
vue add eslint

6.2 常用 Vite 插件

// vite.config.js
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import legacy from '@vitejs/plugin-legacy'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    legacy({
      targets: ['defaults', 'not IE 11']
    }),
    Components({
      resolvers: [ElementPlusResolver()]
    }),
    AutoImport({
      imports: ['vue', 'vue-router', 'vuex'],
      dts: 'src/auto-imports.d.ts'
    })
  ]
})

7. 部署配置

7.1 基本路径配置

// Vue CLI (vue.config.js)
module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/my-app/'
    : '/'
}

// Vite (vite.config.js)
export default defineConfig({
  base: process.env.NODE_ENV === 'production'
    ? '/my-app/'
    : '/'
})

7.2 静态资源处理

// Vue CLI (vue.config.js)
module.exports = {
  assetsDir: 'static',
  productionSourceMap: false
}

// Vite (vite.config.js)
export default defineConfig({
  build: {
    assetsDir: 'static',
    sourcemap: false
  }
})

7.3 CDN 配置

// Vue CLI (vue.config.js)
module.exports = {
  chainWebpack: config => {
    config.plugin('html')
      .tap(args => {
        args[0].cdn = {
          css: ['https://cdn.jsdelivr.net/npm/element-plus@2.2.0/dist/index.css'],
          js: ['https://cdn.jsdelivr.net/npm/vue@3.2.37/dist/vue.global.js']
        }
        return args
      })
  },
  configureWebpack: {
    externals: {
      vue: 'Vue',
      'element-plus': 'ElementPlus'
    }
  }
}

// Vite (vite.config.js)
export default defineConfig({
  build: {
    rollupOptions: {
      external: ['vue', 'element-plus'],
      output: {
        globals: {
          vue: 'Vue',
          'element-plus': 'ElementPlus'
        }
      }
    }
  }
})

结语
感谢您的阅读！期待您的一键三连！欢迎指正！

在这里插入图片描述

Vite 与 Vue Cli 对比 - 尤雨溪: Vite 会取代 vue-cli 吗？
蒋川@卡拉云
05-20 2万+
尤雨溪在发布 Vite 之后写了一条推，感觉不会在用 webpack 了（Vue-cli 基于 Webpack 开发，并配置了 Webpack 打包规则），Sean 是 Webpack 核心开发者，会一些中文，在尤大这条下面直接感叹。 Vue-cli 一直是 Vue 2 默认官方脚手架工具，Vue-cli 基于 Webpack 开发。Vue 3 发布后，尤大同时发布了 Vite ，那么 Vue 3 同时有两个前端打包工具 Vite 和 Vue CLI，那么他们俩应该怎么选呢？
Vue CLI 迁移 Vite 完全指南：从评估到完美切换
最新发布
记录学习的过程
05-24 955
本文将Vue CLI项目迁移至Vite的完整流程分为八个主要步骤。首先，通过项目兼容性检查清单和工具链对比，评估迁移的可行性和难度。接着，详细介绍了依赖项调整、配置文件转换等基础迁移步骤。核心配置迁移部分重点讲解了环境变量处理和路径别名配置。特殊功能迁移方案涵盖了SVG组件化和Webpack插件替代。代码层面的调整包括动态导入语法变化和CSS模块类型支持。迁移后优化策略对比了Vue CLI和Vite的性能优化方案，并推荐了常用插件。常见问题解决方案提供了问题排查清单和渐进式迁移策略。最后，通过迁移检查清单和
Vue脚手架（cli和vite详解）
stc_ljc的博客
11-29 7408
Vue 不会强制你选择某种开发、打包方式，但vue的生态系统提供了许多工具，例如 Vue CLI 和最近的推出的Vite js。那么你应该使用 Vite 还是 Vue CLI？在做出选择的时候，了解 Vite 和 Vue CLI 之间的区别会对我们有很大的帮助。在本文中，我将带着了解一下 Vite 与 Vue CLI，以便你可以根据自己的需求做出最佳选择。
vue3+js Vite多环境端口配置+@别名设置的一次尝试
AiElk的博客
05-09 919
模块系统ESMCommonJS路径基准相对于当前文件 URL相对于当前文件目录。
VueCLI和Vite
桑桑和阿战
03-30 8198
1. VueCLI 1.1 Vue CLI脚手架 什么是Vue脚手架？ 我们前面学习了如何通过webpack配置Vue的开发环境，但是在真实开发中我们不可能每一个项目从头来完成所有的webpack配置，这样显示开发的效率会大大的降低； 所以在真实开发中，我们通常会使用脚手架来创建一个项目，Vue的项目我们使用的就是Vue的脚手架； 脚手架其实是建筑工程中的一个概念，在我们软件工程中也会将一些帮助我们搭建项目的工具称之为脚手架。 Vue的脚手架就是Vue CLI： CLI是Comman.
Vue CLI和Vite
qq_44742440的博客
06-17 998
一. Vue CLI安装和使用 1.1 安装 全局安装，任何时候都可以通过vue的命令来创建项目 npm install @vue/cli -g 1.2 升级 如果是旧版本，可通过该命令升级 npm update @vue/cli -g 1.3 创建 vue create 项目的名称 1.4 配置 空格可以控制是否选择 Choose Vue version 是否选择 vue 版本，目前默认版本 vue2 Babel 是否选择 babel(例如: es6 转换 es5) TypeScrip
Vue CLI VS Vite
警警的博客
06-27 3095
vue cli 、vite、webpack......
基于Vue CLI和Vite构建Vue3工程及其工程结构解析
03-14
首先强调了确保使用至少4.5.0及以上版本的@vue/cli工具，并解释了两者的区别与各自的命令行操作步骤，特别是对首次创建工程、检查版本号、安装全局CLI包的具体指导。接着深入对比了vue2到vue3版本升级后，在初始化...
10.VueCLI和Vite
phoebemeng的博客
08-30 861
学习笔记:认识VueCLI;VueCLI的安装和使用;认识vite;Vite脚手架的安装和使用.
vue2.7.14 + vant + vue cli脚手架转vite启动运行问题记录
weixin_44846945的博客
11-13 1411
vue cli 脚手架转成vite启动简单说说这个项目的一些底层基本结构哈，以及写这篇博客的目的。这个项目底层结构是vue2.7.14 + vant ，使用vue cli脚手架搭建的一个H5项目，由于内容比较多，并没有使用vue3重构，但是由于内容过多，渐渐的启动特别耗时，所以计划该用vite去优化启动项。写这篇博客，是记录本人在这个转换过程中遇到的一些问题。在实际的过程中我用了两种方案，第一种利用插件webpack-to-vite。第二种是自己搭建vite。
cool-vue-vite-cli：使用vite2 vue3 axios vuex vue-router的测试演示
02-20
CSS方面，项目可能包含了对组件样式的定制和工程化的CSS处理，如使用SCSS或Less预处理器。 总结来说，"cool-vue-vite-cli"项目是一个全面展示现代前端开发流程的示例，涵盖了Vite2的快速开发特性、Vue3的新特性、...
Vue-Cli脚手架和Vite
m0_58118986的博客
10-10 804
vue-cli(俗称：vue脚手架)是 vue 官方提供的、快速生成 vue 工程化项目的工具。特点：① 开箱即用，② 基于webpack，③ 功能丰富且易于扩展，④ 支持创建 vue2 和 vue3 的项目如果每个项目都使用webpack一个个去配置，就太过于麻烦了，因此vue-cli出现了。
Vue Cli 迁移至 Vite
weixin_49174517的博客
04-11 2974
项目文件一多起来，cli 的话是先将所有文件编译完，再开启服务，启动慢，影响开发体验，而 vite 先开服务之后，再按需加载当前页面需要的文件，开发体验就好很多
Vue CLI 与 Vite 的区别
weixin_48036026的博客
02-28 1224
本文详细对比了Vue CLI与Vite的区别，涵盖实现原理、优化策略、开发与构建速度、依赖分析及插件系统等方面。Vue CLI基于Webpack，适合大型复杂项目；Vite基于ESModule，开发速度快，适合现代前端项目。文章帮助开发者根据项目需求选择合适工具。
Vite或Vue CLI来选一个最适合你的
Free雅轩的博客
10-11 1869
如果你看过该课程的第一课（它是免费的），你将了解如何开始，但在我们将其与 Vue CLI 和 Webpack 进行比较之前，我们需要了解 Vite 的工作原理。当你创建一个基本的 Vite 项目（在我们的例子中，是 Vue 3 的 Vite 项目）时，index.html文件是非常基本的： [erji]index.html[/erji]但是随着 Vue 的发展，我们开始需要某种程度的打包功能。在 Vue CLI 中，你调试的是Webpack 生成的代码（通过使用源代码映射），而不是调试的你正在编写的代码。
Vue转Vite
Gentlegril的博客
11-19 985
接着，由于我们已经删除了需要babel本身的@vue/cli-plugin-babel依赖项，因此只需要从package.json中删除其他几个babel相关的依赖项。与Vue CLI相反，Vite实际上将保存Vue.js应用程序的index.html文件放在项目的根目录中而不是公共目录中，因此需要移动文件。此外，由于我们正在迁移Vue 2项目，所以除了官方的Vue插件之外，还需要包含Vue 2社区维护的Vite插件。迁移到Vite的第一步是更新package.json中的依赖项。
vue3和vue2的介绍和两种创建方式（cli和vite）
快乐学习
04-16 4881
vue3的简介 2020年9月18日发布3.0版本。代号海贼王（One piece） 其中耗时两年多、2600次提交、30+RFC、600+PR、99位贡献者 （二）vue3对比vue2带来的性能提升 1.更快的渲染速度：Vue 3使用了新的虚拟DOM实现，可以更快地渲染页面，减少页面的闪烁和卡顿。初次渲染快55%，更新渲染快133% 2.更好的TypeScript支持：Vue3引入了全面的TypeScript支持，包括类型检查和代码提示。 3.更好的响应式系统：Vue3的响应式系统比Vue
vue3创建项目（vue-cli和vite)
jk24680的博客
06-04 307
如何创建vue3项目
2024年最全Vue脚手架（cli和vite详解），2024最新腾讯前端高级面试题总结
2401_84619432的博客
05-07 1194
为了帮助大家更好的了解前端，特别整理了《前端工程师面试手册》电子稿文件。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】1.nodejs环境(有的话可跳过)环境需要 要先使用npm进行管理，而使用npm需要先下载nodejs。☞Nodejs下载地址中文官网1.1 下载根据自己电脑系统及位数选择，我的电脑是Windows系统、64位、想下载稳定版的.msi（LTS为长期稳定版）这里选择windows64位.msi格式安装包。
Vue使用vite创建工程
05-19
Vue 3 是一个现代化的 JavaScript 框架，而 Vite 是一个面向现代浏览器的构建工具，可以快速地构建 Vue 项目。下面是在 Vue 3 中使用 Vite 创建工程的步骤： 1. 安装 Vue CLI ``` npm install -g @vue/cli ``` 2. 使用 Vue CLI 创建 Vue 3 工程 ``` vue create my-vue-app ``` 3. 进入项目目录，安装 Vite ``` cd my-vue-app npm install vite --save-dev ``` 4. 修改 package.json 文件，添加 Vite 脚本 ```json "scripts": { "serve": "vite", "build": "vue-cli-service build" } ``` 5. 启动项目 ``` npm run serve ``` 这样就可以使用 Vite 快速构建 Vue 3 项目了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Guiat

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值