在Windows上搭建Vue 2开发环境这件事说难不难说简单也真有一堆坑。我这几年前前后后在Windows下折腾过很多次Vue 2环境从最早照着博客一步步敲命令到现在闭着眼睛几分钟就能把项目跑起来中间踩过的坑说实话不算少。这篇教程我把验证下来最顺畅的一套windows环境搭建和Vue 2项目创建流程整理出来目标是让零基础的同学照着做也能顺利启动第一个Vue 2项目。这篇内容适合三类人刚开始学Vue 2的学生、从其他框架转过来的前端开发、以及要在Vue 2存量项目上做维护的工程师。我会把每个关键步骤背后的原因也讲清楚而不是只丢命令这样你以后遇到变体能自己排查。全程基于Windows系统用命令行操作不依赖任何图形化工具。1. 动手之前先搞清楚你的环境需要什么1.1 为什么Vue 2对Windows开发者格外“挑剔”很多新手上来就安装最新版的Node.js然后跑Vue 2项目的时候各种报错心态直接崩掉。这个问题的根源在于Vue 2生态的构建工具链是基于Webpack 4的而Webpack 4发布的历史比较早它对Node.js新版本的支持并不好尤其是Node 17之后默认启用的OpenSSL 3.0策略会导致Webpack 4在构建时直接报出digital envelope routines::unsupported这样的底层错误。这就像你给一台老式打印机换了一台新电脑系统太新、驱动跟不上的感觉。Vue 2项目在Windows上能不能跑得顺很大程度取决于Node.js版本选得对不对。另外Windows平台本身没有自带包管理器和命令行工具链所有基础环境都需要自己装Node.js装好后还要额外确认环境变量、npm镜像这些细节任何一个环节掉链子后面创建项目都会卡住。1.2 环境组合建议推荐一套少踩坑的配置我实际使用下来下面这套组合在Windows上最稳定几乎可以避免90%的坑组件推荐版本说明Node.js16.20.2 LTSVue 2生态兼容最好的版本自带npm 8.xnpm8.19.4随Node自带无需单独安装镜像源https://registry.npmmirror.com国内下载依赖速度快Vue CLI5.0.8最后一个完整支持Vue 2的脚手架版本编辑器VS Code配合Vetur插件使用Node.js 16看起来不是最新版但它是LTS长期支持版本中最后一个与Webpack 4和Vue CLI 4/5都能无缝配合的版本。Node 18、Node 20虽然新但很多Vue 2项目跑起来都有隐患。做项目不等于追新稳定才是第一位的这个道理在Vue 2这个生态里尤其明显。提示如果你的电脑上已经装了其他版本的Node.js不要急着卸载。可以先装一个Node版本管理工具nvm-windows后面我会单独说这个工具它能让你随时切换Node版本非常实用。2. Node.js安装与环境配置核心环节2.1 下载Node.js版本选对后面省事打开Node.js官网nodejs.org不要点首页那个绿色的大按钮那个是当前最新版可能是Node 20或更高。你要往下翻找到Previous Releases或者直接访问 nodejs.org/dist/下载v16.20.2这个版本Windows系统选择.msi格式的安装包。如果是64位系统选node-v16.20.2-x64.msi。安装的时候有几个细节要特别注意安装路径建议不要有中文、不要有空格比如直接装到D:\nodejs\避免一些老工具因为路径解析出错。安装界面里有个Add to PATH的选项默认是勾选的一定要保持勾选这会把Node的安装目录自动写入系统环境变量。如果电脑上装了杀毒软件或者安全管家安装过程中可能拦截写环境变量遇到这种情况先退出安全软件再装。安装完成后不需要重启电脑但建议重新打开一个cmd窗口让环境变量生效。Node.js安装后会同时装上npm这也是Node包管理器的默认标配不需要单独下载。2.2 验证安装与环境变量配置打开命令提示符cmd输入以下两条命令验证环境node -v npm -v能看到v16.20.2和8.19.4这样的版本号输出说明Node.js和npm都已经装好。如果提示“node不是内部或外部命令”多半是环境变量没配上。可以右键“此电脑” - “属性” - “高级系统设置” - “环境变量”确认Path里有D:\nodejs\这条记录。还有一步我建议在刚开始就做好修改npm的全局包安装路径。默认情况下npm全局安装的包会放在Node安装目录里在Windows上经常因为权限问题安装失败。执行以下两条命令把全局包和缓存放到单独目录npm config set prefix D:\nodejs\node_global npm config set cache D:\nodejs\node_cache然后在系统环境变量的Path中新增一条D:\nodejs\node_global。这样后面全局安装Vue CLI时可执行文件会生成到指定的node_global目录不会出现权限不足的尴尬情况。改完之后重新打开cmd确认一下npm config get prefix npm config get cache2.3 配置npm镜像源国内开发者必做的一步npm默认的官方源在国外国内网络环境下下载依赖包经常慢到怀疑人生甚至直接超时失败。解决办法就是切换镜像源。目前最常用的是淘宝镜像现在叫npmmirror在cmd里执行npm config set registry https://registry.npmmirror.com设置完成后验证npm config get registry看到输出https://registry.npmmirror.com/就说明切换成功。后面再用npm install安装依赖速度会快好几倍。这个镜像库会和官方源保持同步所以不用担心包版本不一致的问题。3. Vue CLI的安装与项目脚手架创建3.1 全局安装Vue CLI环境就绪后开始安装Vue CLI脚手架工具。在cmd中执行npm install -g vue/cli5.0.8这里我特意锁定了5.0.8版本因为Vue CLI从5.x开始默认创建项目时才会给你完整的Vue 2/3选项。而且5.0.8是Vue CLI 5系列的最后一个版本非常稳定。不锁版本直接装vue/cli最新版也可以但目前最新的Vue CLI还是5.x问题不大锁版本只是为了保险。安装完成后验证vue --version如果能输出版本号vue/cli 5.0.8恭喜你脚手架安装成功。如果提示无法识别说明刚才的node_global路径没有写进系统Path回去检查一下环境变量然后重新打开cmd。3.2 创建Vue 2项目的两种方式Vue CLI 5创建项目的命令是vue create。在你想放置项目的目录下比如D:\workspace执行vue create vue2-demo接下来会有一个交互式选择界面这一步是重点Vue CLI v5.0.8 ? Please pick a preset: Default ([Vue 3] babel, eslint) Default ([Vue 2] babel, eslint) Manually select features会有三个选项。创建一个纯Vue 2项目最简单直接的方式是选择第二项Default ([Vue 2] babel, eslint)按键盘上下箭头键移动光标到这一项回车确认。脚手架会自动创建一个带Babel转译和ESLint检查的Vue 2项目不需要你再手动选任何东西。如果你以后可能要用到Router、Vuex、TypeScript这些功能那就选第三项Manually select features回车后会进入一个多选界面用上下键和空格键勾选你需要的功能模块最后一路回车到选择Vue版本时注意选2.x而不是默认的3.x。另一种创建方式是使用老版本的vue init命令npm install -g vue/cli-init vue init webpack vue2-demo这种方式生成的webpack模板是Vue 2早期最流行的结构目录更传统有些公司的老项目就是这种结构。如果你不是要维护老项目直接用Vue CLI 5的方式就够了生成的项目结构更加规范和精简。3.3 项目启动与验证项目创建完成后进入项目目录并启动开发服务器cd vue2-demo npm run serve第一次运行会自动安装项目依赖创建项目时已经装过但如果中途报错或者换过目录可以执行npm install再手动装一次。启动成功后终端会显示类似下面的信息App running at: - Local: http://localhost:8080/ - Network: http://192.168.x.x:8080/打开浏览器访问http://localhost:8080/看到Vue的欢迎页面就说明项目创建成功。开发服务器默认开启热更新你修改src/App.vue并保存浏览器页面会自动刷新。4. 项目结构与核心配置解读4.1 目录结构逐层拆解一个用Vue CLI 5创建的Vue 2项目目录结构非常清晰。很多新手上来就写代码从来不关注这些文件夹是干嘛的后面代码一多就乱套。这里我按实际开发的顺序把每个目录拆开讲vue2-demo/ ├── node_modules/ # 安装的依赖包不用管跑npm install时自动生成 ├── public/ # 静态资源目录打包时会原样复制到dist │ ├── favicon.ico # 页面图标 │ └── index.html # 入口HTML文件 ├── src/ # 主要开发目录代码都写在这里 │ ├── assets/ # 静态资源图片、样式等 │ ├── components/ # Vue组件 │ ├── App.vue # 根组件 │ └── main.js # 入口JS文件创建Vue实例 ├── .gitignore # Git忽略文件配置 ├── babel.config.js # Babel转译配置 ├── jsconfig.json # JS语言服务配置VS Code提示用 ├── package.json # 项目配置和依赖清单 ├── package-lock.json # 依赖锁定文件 └── vue.config.js # Vue CLI核心配置文件初始可能不存在核心文件里main.js是整个应用的入口它负责创建Vue实例并挂载到HTML页面上。默认内容大概是import Vue from vue import App from ./App.vue Vue.config.productionTip false new Vue({ render: h h(App), }).$mount(#app)这段代码很好理解从vue包引入Vue构造函数引入根组件App.vue然后创建一个Vue实例用render函数把App组件渲染到#app这个DOM节点上。Vue 2的响应式系统、依赖收集都是从这个实例开始工作的。4.2 package.json里的关键脚本和依赖package.json是项目的“身份证”所有依赖和命令都定义在这里。打开它你会看到类似这样的内容{ scripts: { serve: vue-cli-service serve, build: vue-cli-service build, lint: vue-cli-service lint }, dependencies: { core-js: ^3.8.3, vue: ^2.6.14 }, devDependencies: { vue/cli-service: ~5.0.8, vue-template-compiler: ^2.6.14 } }这里解释一下几个关键点scripts里的serve对应开发环境启动命令build是打包生产环境的命令lint是代码规范检查命令。dependencies里的vue版本号是^2.6.14说明安装的是Vue 2.6.14及以上的兼容版本。如果你初始化时选择了Vue 2预设这里的vue一定是2.x。vue-template-compiler是Vue 2特有的编译依赖它必须和vue保持相同版本否则会提示版本不匹配。如果你自己手动升级vue版本别忘了同步升级它。注意这里有个Vue 2.7需要特别说一下。Vue 2.7是Vue 2最后一个大版本它在2.x的基础上引入了一些Vue 3的API比如composition API兼容性做了大量处理。如果新项目建议直接用Vue 2.7里面的bug修复和性能优化都是最好的。初始化时是2.6也没关系后面手动升级到2.7完全没问题。4.3 vue.config.js常用配置示例Vue CLI项目在根目录创建一个vue.config.js文件这是Vue CLI的配置文件也是最核心的扩展点。默认项目里没有这个文件开发过程中基本一定会用到。我给你一个常用配置模板const { defineConfig } require(vue/cli-service) module.exports defineConfig({ transpileDependencies: true, lintOnSave: false, // 保存时是否执行eslint检查 productionSourceMap: false, // 生产环境是否生成sourceMap devServer: { port: 8088, // 修改开发服务器端口 open: true, // 启动时自动打开浏览器 proxy: { /api: { target: http://localhost:3000, // 后端地址 changeOrigin: true, pathRewrite: { ^/api: } } } } })这里的devServer.proxy配置在日常开发中几乎必不可少。比如前端运行在8080端口后端接口运行在3000端口浏览器直接向后端发请求会有跨域问题。配置代理后所有以/api开头的请求都会转发到http://localhost:3000上路径中的/api前缀在转发时会被重写掉。这个机制保证了本地联调时前端环境和后端环境不在同一端口也能顺利通信。5. 新装环境常见问题排查实录5.1 npm安装卡住或超时这个问题在Windows上太常见了。表现就是执行npm install或npm install -g vue/cli后进度条一动不动等了很久最后报错ETIMEDOUT或ECONNRESET。排查思路先确认镜像源是否切换成功执行npm config get registry如果不是 npmmirror 的地址说明镜像没配好。如果已经切换了还是卡可以试试清除npm缓存npm cache clean --force然后删除项目里的node_modules目录和package-lock.json文件重新执行npm install。如果是全局包安装卡住加一个--verbose参数看具体卡在哪个包上针对性地处理。实在不行就用yarn作为备选包管理器npm install -g yarn yarn install5.2 启动报错 digital envelope routines::unsupported这个报错我刚开始也遇到过出现在老Vue 2项目Webpack 4上报错内容是一个长串error:0308010C:digital envelope routines::unsupported原因就是Node.js版本过高。Vue 2项目使用Webpack 4而Webpack 4依赖OpenSSL的旧版APINode 17及以后版本移除了这个API导致加密算法初始化失败。解决办法有三个最推荐的用nvm-windows把Node版本切换到16。如果不想装nvm可以在启动命令前加参数set NODE_OPTIONS--openssl-legacy-provider npm run serve或者修改package.json里的serve脚本serve: set NODE_OPTIONS--openssl-legacy-provider vue-cli-service serve但注意这是在Windows cmd下用set如果用PowerShell需要写成$env:NODE_OPTIONS--openssl-legacy-provider否则不生效。5.3 端口被占用npm run serve默认监听8080端口但这个端口经常被微信开发者工具、其他项目的调试页面或者其他开发服务占用。启动时如果看到Port 8080 is already in use解决办法有几种最方便的是换端口启动npm run serve -- --port 8081或者在vue.config.js里直接指定端口刚才的配置示例里就有。如果你想保留8080端口那就找出占用这个端口的进程并结束它netstat -ano | findstr 8080 taskkill /PID 占用的PID /F5.4 提示 vue 无法加载文件在Windows PowerShell里执行vue --version时有时候会报这样一个错误vue : 无法加载文件 C:\...\vue.ps1因为在此系统上禁止运行脚本这是因为PowerShell默认禁止执行未签名的脚本文件。解决办法是右键点击开始菜单打开“Windows PowerShell (管理员)”执行set-ExecutionPolicy RemoteSigned选择“是”或“全是”确认。然后重新打开PowerShell。如果不想改变执行策略也可以直接使用cmd窗口而不是PowerShell来执行命令cmd不受这个限制。5.5 编辑器配置与开发体验优化Windows下写Vue 2项目VS Code是最主流的编辑器但两个插件选错也会影响体验。Vue 2项目用Vetur插件做语法高亮和代码片段用ESLint插件配合项目的规范检查。注意Vue 3项目推荐用Volar这个插件在Vue 2项目上支持并不好两个插件同时启用会冲突所以Vue 2和Vue 3项目最好分别建不同的工作区。另外建议在VS Code里配置一下“格式化”快捷键ShiftAltF和“保存时自动格式化”选项。Vue 2项目用Prettier插件格式化代码模板、脚本、样式三段一起格式化代码风格统一了后面团队协作少很多扯皮。6. 从环境到实战接下来还能做什么6.1 Vue 2项目的常用配套选型项目能跑起来只是第一步实际业务开发还需要一堆配套库。这里我列一份目前Vue 2生态常见的组合都是经过大规模项目验证的场景推荐库版本提示UI组件库Element UI只支持Vue 2支持Vue 3的是Element Plus路由Vue RouterVue 2对应3.x版本用4.x会报错状态管理VuexVue 2对应3.x版本HTTP请求axios前后端都通用富文本编辑器wangEditor轻量、简单、中文友好拖拽vuedraggable基于Sortable.js封装JSON展示/编辑vue-json-viewer轻量JSON格式化展示特别注意版本匹配问题Vue Router 4和Vuex 4都是为Vue 3设计的如果直接npm install vue-router装到最新版Vue 2项目启动会报错。稳妥的安装方式是指定版本npm install vue-router3.6.5 vuex3.6.26.2 Vue 2迁移Vue 3前需要知道的几件事现在很多新项目已经转向Vue 3Vue 2官方维护也在2023年底进入终点。如果你是准备把老Vue 2项目升级到Vue 3有几个核心差异提前了解能少走弯路创建应用的方式变了。Vue 2用new Vue()Vue 3改成createApp()返回一个应用实例。生命周期函数名称变了。Vue 2的beforeDestroy和destroyed在Vue 3里改成了beforeUnmount和unmounted这个改名非常容易遗漏。响应式系统升级。Vue 2基于Object.definePropertyVue 3用Proxy实现对数组和对象新增属性的监听能力完全不同。工具链切换。Vue 3推荐用Vite做构建工具Node.js版本要求更高项目启动速度和热更新体验在Windows下要明显快于Webpack。这些内容展开写又是一篇长文这里点到为止。但核心结论是如果你想在Windows上同时维护Vue 2老项目和Vue 3新项目强烈建议用nvm管理Node版本Vue 2用16、Vue 3用18或20互不干扰。我个人在实际操作中的体会是Windows下的Vue 2环境搭建90%的问题都出在Node版本和npm源这两个点上。只要把Node 16装好、npm源切到国内镜像后面基本一路顺畅。很多人一上来就去翻各种博客找报错解决方案结果越改越乱归根结底是基础环境没打牢。建议你装完环境后把nvm-windows这个Node版本管理工具一并装好它就像给电脑装了一副“多版本眼镜”以后不管是维护老项目还是尝鲜新框架随时都能切版本不会把自己锁死在一条路上。希望这篇教程能帮你顺利跑起第一个Vue 2项目也欢迎在评论区交流你遇到的问题。