vue-cli4 全面配置
发布网友
发布时间：2024-10-03 16:20
共1个回答
热心网友
时间：2024-10-03 18:12
此指南详尽介绍了vue-cli4的配置选项，适用于满足开发过程中的各种需求，但建议根据项目需求进行个性化配置，从 vue.config.js 文件中定制并安装所需的依赖。
多环境变量管理
在`package.json`的scripts中通过`--mode xxx`选择不同环境，其中VUE_APP开头的变量会被webpack.DefinePlugin静态嵌入客户端，如`process.env.VUE_APP_BASE_API`。
环境变量配置
创建`.env`, `.env.production`, `.env.analyz`等文件，分别对应serve、build等默认环境。NODE_ENV和BASE_URL始终可用。
代理和跨域处理
使用proxy配置解决跨域问题，例如mock接口：`easy-mock.com/mock/5bc7...`。
其他问题解决
修复HMR失效：参照官方文档进行操作
Lazy loading routes Error：检查是否存在循环依赖
资源管理
图片压缩：确保libpng依赖安装正确
自动生成雪碧图：首次运行`npm run serve/build`
SVG转font：创建scripts目录和svg2font.js文件进行配置
组件和打包
使用SVG组件：创建icons文件夹并导入
优化CSS：谨慎使用，可能影响样式
CDN和多页面打包
通过externals在html中引入CDN资源，或多页面打包，配置pages字段以支持多个入口。
移除和优化
删除moment语言包：仅保留zh-cn中文包
移除console.log：使用babel-plugin-transform-remove-console或指定transpileDependencies
其他特性
stylelint检测：创建stylelint.config.js并启用
全局样式和变量：利用Vue.prototype.$src或CSS/SCSS引入环境变量
IE兼容：添加特定配置到main.js和babel.config.js
文件上传：使用oss或obs插件进行自动上传
