【源码】基于vuecli3框架的项目综合配置方案

项目简介

本项目是基于vue-cli3框架的项目综合配置方案，提供了一套完整且实用的vue项目配置体系，涵盖多环境变量管理、基础配置、跨域处理、性能优化、兼容性处理等功能，能提升vue项目的开发效率和部署质量。

项目的主要特性和功能

1. 多环境变量配置：支持开发、生产和分析等环境，可通过package.json的scripts配置项和.env系列文件灵活切换。
2. 基础配置：全面配置vue.config.js，包含基础路径、输出目录、静态资源目录等。
3. 跨域处理：用proxy配置解决跨域问题，便于前后端联调。
4. 热更新修复：修复HMR失效问题，提高开发效率。
5. 路由问题修复：解决Lazy loading routes Error中的Cyclic dependency问题。
6. 别名设置：为项目目录添加别名，简化文件引用路径。
7. 图片压缩：使用image-webpack-loader压缩图片，减小包体积。
8. CSS优化：提供两种方案去除多余无效的CSS，提升页面加载速度。
9. 打包分析：借助webpack-bundle-analyzer进行打包分析，优化打包策略。
10. externals配置：避免部分包打包到bundle中，运行时从外部获取，减小包体积。
11. 去除console.log：提供两种方法在生产环境去除console.log，保证代码安全。
12. 压缩配置：支持gzip、Zopfli和Brotli压缩，提升传输效率。
13. 全局样式和变量：为sass和stylus提供全局样式和变量，方便样式管理。
14. IE兼容：引入@babel/polyfill实现IE兼容性。
15. 文件上传：支持将文件上传到阿里云OSS。

安装使用步骤

1. 下载本项目的源码文件。
2. 确保已安装Node.js和npm。
3. 进入项目根目录，执行以下命令安装依赖： bash npm install
4. 根据实际需求，在项目根目录下的.env、.env.production、.env.analyz文件中配置环境变量。
5. 根据不同需求运行以下命令：
   • 启动开发环境： bash npm run serve
   • 构建生产环境： bash npm run build
   • 进行打包分析： bash npm run analyz
   • 代码检查： bash npm run lint

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】