如何区分vue2还是vue3项目

干货食堂 2023-03-04

1459

如何查看vue2和vue3项目的区别，作为一个后端开发人员，我对于前端的项目结构真是看的是一脸懵逼，怎么这个项目没有public文件夹，怎么这个项目是src文件夹，怎么没有static文件夹，怎么配置文件是vue.config.js 文件，怎么这个项目的配置文件又是webpack.config.js ........ ??????????????????????????????

shit！！！看着真的是烦，天天来回的变变变，说实在话，我还是喜欢传统的jquer时代的项目文件结构，除了代码量多和不能打包编译外没什么不好的。

好了，吐槽完毕，进入整体。

不同的cli版本的vue项目文件目录结构不一样，这个和后端项目差别很大，一般情况，后端的项目结构基本就不会变，不管你是spring 1.0升到了3.0 还是maven从2.6 升到了3.6 ，我创建一个springboot的脚手架项目，就是那么目录结构，各任其职，简单明了。但是前端就不一样了，vue2和vue3项目结构很大的变化。

项目结构

vue-cli3/cli4中移除了配置文件目录：config 和 build 文件夹。

同时移除了 static 静态文件夹，新增了 public 文件夹，将 index.html 移动到 public 中。

1. vue-cli2

|-- build                            // 项目构建(webpack)相关代码
|   |-- build.js                     // 生产环境构建代码
|   |-- check-version.js             // 检查node、npm等版本
|   |-- utils.js                     // 构建工具相关
|   |-- vue-loader.conf.js           // webpack loader配置
|   |-- webpack.base.conf.js         // webpack基础配置
|   |-- webpack.dev.conf.js          // webpack开发环境配置,构建开发本地服务器
|   |-- webpack.prod.conf.js         // webpack生产环境配置
|-- config                           // 项目开发环境配置
|   |-- dev.env.js                   // 开发环境变量
|   |-- index.js                     // 项目一些配置变量
|   |-- prod.env.js                  // 生产环境变量
|-- src                              // 源码目录
|   |-- components                   // vue公共组件
|   |-- router                       // vue的路由管理
|   |-- App.vue                      // 页面入口文件
|   |-- main.js                      // 程序入口文件，加载各种公共组件
|-- static                           // 静态文件，比如一些图片，json数据等
|-- .babelrc                         // ES6语法编译配置
|-- .editorconfig                    // 定义代码格式
|-- .gitignore                       // git上传需要忽略的文件格式
|-- .postcsssrc                      // postcss配置文件
|-- README.md                        // 项目说明
|-- index.html                       // 入口页面
|-- package.json                     // 项目基本信息,包依赖信息等

2. vue-cli3/cli4及以上

|-- src                            // 源码目录
|  |-- components                  // vue公共组件
|  |-- router                      // vue的路由管理
|  |-- App.vue                     // 页面入口文件
|  |-- main.js                     // 程序入口文件，加载各种公共组件
|-- public                         // 静态文件，比如一些图片，json数据等
|  |-- favicon.ico                 // 图标文件
|  |-- index.html                  // 入口页面
|-- vue.config.js                  // 是一个可选的配置文件，包含了大部分的vue项目配置
|-- .babelrc                       // ES6语法编译配置
|-- .editorconfig                  // 定义代码格式
|-- .gitignore                     // git上传需要忽略的文件格式
|-- .postcsssrc                    // postcss配置文件
|-- README.md                      // 项目说明
|-- package.json                  // 项目基本信息,包依赖信息等