关于整个vue项目结构详解（vue.config.js）

文件关系详解

1. 各个文件之间，本身是没有关系的，因为相互引入，所以产生了关系
   • 首先是各个文件之间代表了什么，可以参考vue结构详解，这里不做过多赘述
   • src 做为整个项目的内容主体，担任了直面客户的主要角色
   • static 做为整个静态资源库，里面放的东西比如：css、img、ttf字体等
   • tests vue的单元测试项，可删除，感兴趣的可以自行搜索vue 单元测试进行学习
   • public/index.html 文件的主体内容项，浏览器显示的页面都属于html页面，所以index.html相当于为我们现在做的项目套一个壳
   • dist 是最后的产品，整个项目通过npm run build形成的最后打包文件
   • 其他文件都是属于配置文件，辅助开发
     • package.json 文件其实就是对项目或者模块包的描述，里面包含许多元信息，在node环境下必备文件。比如：项目名称、项目版本、项目执行入口文件、项目贡献者等等。npm init在我们初始化生成项目的时候，主要生成的就是这个文件，也是你下载依赖npm install的根文件

package name: 你的项目名字叫啥
version: 版本号
description: 对项目的描述
entry point: 项目的入口文件（一般你要用那个js文件作为node服务，就填写那个文件）
test command: 项目启动的时候要用什么命令来执行脚本文件（默认为node app.js）
git repository: 如果你要将项目上传到git中的话，那么就需要填写git的仓库地址（这里就不写地址了）
keywirds： 项目关键字（我也不知道有啥用，所以我就不写了）
author: 作者的名字（也就是你叫啥名字）
license: 发行项目需要的证书（这里也就自己玩玩，就不写了）

package.json记录当前项目所依赖模块的版本信息，更新模块时锁定模块的大版本号（版本号的第一位）
package-lock.json记录了node_modules目录下所有模块的具体来源和版本号以及其他的信息

如果没有package-lock.json，当你使用npm i 某个依赖的时候如果加上版本，那他会下载这个依赖的最新版本。
所以，package-lock.json就是当前项目依赖的版本控制器
package.json和package-lock.json保证了大家在协同开发的时候所用的依赖模块版本是一致的
当你的项目新增了一个依赖模块请一定要把package.json和package-lock.json一起上传,这样别人下载项目的时候去更新模块信息，就能得到和你一模一样的模块版本

2. node_moudles 作为整个项目的依赖包，当我们引入某个UI库或者组件时，通过下载后，可在你说在的文件中引用组件
   

webpack配置（vue.config.js或build）

vue.config.js 配置(vue自主构建)

vue-cli3 脚手架搭建完成后，项目目录中没有 vue.config.js 文件，需要手动创建

vue.config.js配置选项：

1. publicPath
   Type: string
   Default: ‘/’
   部署应用包时的基本 URL， 用法和 webpack 本身的 output.publicPath 一致。 这个值也可以被设置为空字符串 ('') 或是相对路径 ('./')，这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径。
   （注：vue-router的base配置和vue.config.js配置文件的publicPath配置保持一致）
   （如果只配置了vue-router的base配置，最后会发现，找不到，因为打包的时候，在dist文件内部没有app文件夹，所以找不到，如果，加了一个dist/app就可以正常访问了）
   
   （如果只设置vue.config.js的publicPath配置，最后会发现，在包下面还有一个app文件）
   
   如果nginx，一般nginx都会配置一个静态资源目录，打包后的文件都会放到这个静态资源目录里面，nginx去做映射，所以publicPath这个属性基本不用改。’/'就行
2. outputDir
   
3. assetsDir
   
4. indexPath
   
5. filenameHashing
   
6. pages
   
7. lintOnSave
   
8. runtimeCompiler
   
9. transpileDependencies
   
10. productionSourceMap
    
11. crossorigin
    
12. integrity