Vue项目目录结构及功能

目录结构解析

build

(不重要)

下面是初建项目后的build文件夹

1.build.js
作为项目打包的时候（npm run build）的入口文件，通过这个js将整体项目打包
2.check-version.js
用于版本node和npm版本的检测
3.utils.js
用于项目中关于loader器的引用和项目title、icon等设置
4.vue-loader.conf.js
因为项目是基于vue的，所以，需要一个vue-loader来识别.vue后缀的文件，这个文件，就是vue-loader的配置文件
5.webpack.base.conf.js
项目webpack的基础配置文件
6.webpack.dev.conf.js
开发环境下的webpack配置文件
当我们输入npm run dev首先启动的就是webpack.dev.conf.js，它会去检查node及npm版本，加载配置文件，启动服务

8.webpack.prod.conf.js
生产环境下的webpack配置文件,主要用来处理各种文件的配置

config

1.dev.env.js、prod.env.js
用于配置项目的环境变量
2.index.js
用于webpack的一些配置信息

node_modules

项目依赖包，包括很多基础依赖，自己也可以根据需要安装其他依赖

src

在后面的编程过程中，我们的主要操作的文件都在这个文件夹中

.assets

放置项目的模块静态资源，如css，js还有图片、字体

.components

这里存放的是开发需要的的各种组件，将来要展现在前端的vue文件大部分都存在这里

.router

vue-router能让我们能处理vue的路由，从而更佳的使用component，这个文件夹内存放vue-router的配置文件

.App.vue

项目的根组件
所有页面都是在App.vue下进行切换的，是项目所有组件和路由的出口

.main.js

入口文件，引入vue模块和App.vue组件以及路由router，我们需要在全局使用的一些东西也可以定义在这里面

static

用于存放用户不希望使用Webpack来处理的静态资源

其他根目录文件

.babelrc: ES6语法编译配置

.editorconfig: 代码的规范文件，规定使用空格或 tab 缩进，缩进的长度是两位还是四位之类的代码风格，使用的话需要在编辑器里下载对应的插件；

.gitignore: 指定 git 忽略的文件，所有 git 操作均不会对其生效；

.postcssrc: 指定使用的 css 预编译器，里面默认配置了 autoprefixer ，自动补全浏览器前缀

.index.html: 首页文件，项目运行的时候，会自动将我们在 src 文件夹里生成的组件插入这个文件里

.package.json: 指定项目开发和生成环境中需要使用的依赖库

.package-lock.json: 当 node_modules 或 package.json 发生变化时自动生成的文件。这个文件主要功能是确定当前安装的包的依赖，以便后续重新安装的时候生成相同的依赖，而忽略项目开发过程中有些依赖已经发生的更新

.README.md: 相当于是一个备注文件，对项目开发过程中需要注意的地方进行一些说明

静态文件存放问题

很容易注意到，在上面描述的文件目录中，有两个文件夹都可以用来存放静态资源文件，那这两个文件夹有什么区别呢？

在vue的官方文档中，详细介绍了相关问题（感觉并不能解决问题），大家可以从下面的链接进去浏览

http://vuejs-templates.github.io/webpack/static.html

然后说一下我在看了很多材料后对这个问题的个人理解
我们以图片文件为例
首先，把文件存在这两个文件夹下的一个区别是
assets 中的文件只能使用相对路径，不能使用绝对路径访问
static 中的文件可以使用绝对路径和相对路径访问

而使用绝对路径和相对路径，在打包前进行测试的时候没有差别，但是在打包后，就不一样了。
使用相对路径引入的图片，在打包后，图片的完整文件数据和路径会被一起被打包进js文件中，即使将路径中的文件删掉也可以访问到。所以如果把使用相对路径引入的图片资源放在static文件夹中，打包后没有存在的意义。
使用绝对路径引入的图片，在打包后，不会被打包进js文件，而是仍然以文件的形式存放在static文件夹中如果更改文件名或删除文件将不能访问。

因此，建议大家用assets文件夹存放相对路径引入的资源，用static文件夹存放绝对路径引入的资源

另外，使用相对路径引入的资源由于在打包过程中被写入了js文件中，无法调整，所以对于不会经常改变的图片建议放在assets中，而可能经常更换的图片建议放在static中

大佬们如发现文章中内容有任何疏漏还请在评论区留言~