Vue脚手架目录详解

build：webpack配置文件

config：webpack配置文件

node_modules：安装的依赖包

src：所有的组件都写在里面

static：所有第三方的静态资源存放目录

.babelrc：babel的一些配置（比如将es6编译成es5的一些配置）

.editorconfig：编辑器的一些配置（包括编码格式，缩进风格，换行格式）

.gitignore：配置Git仓库忽略的一些文件（不会上传）

.postcssrc.js 配置postcss的文件（主要是css样式兼容性，自动加前缀（autoprefixer））

index.html：入口html文件。

package.json: 项目的一些配置信息（项目的一些具体信息）

package-lock.json就是锁定安装时的包的版本号，并且需要上传到git，以保证其他人在npm install时大家的依赖能保证一致。

autoprefixer：是用于给css3属性自动加属性前缀的

babel系列都是处理语法的

chalk：适用于格式化输出命令行信息的，比如run dev以后的start...

copy-webpack-plugin：在webpack中拷贝文件和文件夹

extract-text-webpack-plugin：为了抽离css样式，防止将样式打包在js中引起页面样式加载错乱的现象

file-loader：操作文件

friendly-errors-webpack-plugin：能够更好在终端看到webapck运行的警告和错误

html-webpack-plugin ：插件的基本作用就是生成html文件

node-notifier：来发送桌面消息,包括应用状态改变以及错误信息

optimize-css-assets-webpack-plugin：压缩提取出的css，并解决ExtractTextPlugin分离出的js重复问题(多个文件引入同一css文件)

ora：命令行里自动运行的信息提示

portfinder：可以帮你找出正在运行的进程打开了哪些端口

rimraf：跑shell命令 rm-rf 的工具

semver：是用来对特定的版本号做判断的(check-version.js)中

shelljs：selljs是在node里跑shell命令的工具，比如‘rm -rf’在(check-version.js)中，属于Unix命令

uglifyjs-webpack-plugin：压缩js

webpack：打包工具

webpack-bundle-analyzer：打包优化工具，可得到一个可视化模块大小界面

webpack-dev-server：配合webpack，创建开发环境（启动服务器、监视文件变化、自动编译、刷新浏览器等），提高开发效率

webpack-merge：合并

1、先配置nginx:

2、在路由中添加

注意如果是ts文件的话，如果默认有生成js的话要查看对应的js是否有加上目录，否则设置会无效。

3、在vite.config.ts文件中添加

---