构建&部署
前言
由于是展示项目,所以打包后相对较大,如果项目中没有用到的插件,可以删除对应的文件或者路由,不引用即可,没有引用就不会打包。
构建
项目开发完成之后,执行以下命令进行构建
- 开发环境 npm run build dev ===> dist-dev
- 测试环境 npm run build test ===> dist-test
- 生产环境 npm run build pro ===> dist-pro
构建打包成功之后,会在根目录生成 dist-* 文件夹,里面就是构建打包好的文件。
预览
发布之前可以在本地进行预览
不能直接打开构建后的 html 文件
使用项目自定的命令进行预览(推荐)
bash
# 先打包在进行预览
# 预览开发环境
npm run preview dev
# 预览测试环境
npm run preview test
# 预览生产环境
npm run preview pro
部署
注意
项目默认是在生产环境开启 Mock,这样做非常不好,只是为了演示环境有数据,不建议在生产环境使用 Mock,而应该使用真实的后台接口。
发布
简单的部署只需要将最终生成的静态文件,dist-* 文件夹的静态文件发布到你的 cdn 或者静态服务器即可。
部署时可能会发现资源路径不对,只需要修改对应的.env.xxx
文件即可。
bash
# 根据自己路径来配置更改
VITE_BASE_PATH = /dist-dev/