Vue-Cli该如何使用?Vue-Cli学习笔记,持续记录
Vue-cli学习记录
1.模式和环境变量
修改.Env环境变量文件之后,需要重新运行server才会生效。环境变量通过process.ENV访问。可以在项目根目录中放置下列文件来指定环境变量:
.env # 在所有的环境中被载入
.local # 在所有的环境中被载入,但会被 git 忽略
.env.[mode] # 只在指定的模式中被载入
.env.[mode].local # 只在指定的模式中被载入,但会被 git 忽略
以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。你可以在应用的代码中这样访问它们:
如何在Vue CLI上配置process.env环境变量?
https://cli.vuejs.org/zh/guide/mode-and-env.html#%E6%A8%A1%E5%BC%8F
模式是 Vue CLI 项目中一个重要的概念。默认情况下,一个 Vue CLI 项目有三个模式:
development 模式用于 vue-cli-service serve
test 模式用于 vue-cli-service test:unit
production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e
2.Vue.config.js 配置项
相关说明:https://cli.vuejs.org/zh/
官方文档:https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE
配置项说明:https://cli.vuejs.org/zh/config/
调整webpack相关配置:https://cli.vuejs.org/zh/guide/webpack.html
注意:
vue-cli 升级成3.0以上版本webpack.base.conf.js已经没有了,所有配置都在vue.config.js中进行。
3.查看使用的vue和vue-cli版本
查看vue版本,在package.json中直接查看vue的版本,或者通过命令行。(https://blog.csdn.net/weixin_39788999/article/details/105022415)
npm list vue
查看vue-cli的版本号,通过命令行
vue -V
4.scss版本过高导致无法编译
Vue-cli使用scss是不需要进行任何配置的,npm安装的时候安装的最新的scss-loader 13.x,导致vue-cli 5.x编译一直失败,卸载强制安装7.x的scss-loader后编译成功。以下为scss安装命令:
npm install sass -D /* 局部安装 */
npm install sass-loader -D /* 局部安装 */
相关文档:https://blog.csdn.net/weixin_43856797/article/details/115966706
- node-sass 把 sass编译成css
- sass-loader 是webpack的一个loader, 让构建工具可以处理.scss文件。
5.sass各种包的说明
- sass 是由 ts调用 dart-sass实现的工具类,来编译 sass(以前是由单纯的 ts实现的)
- dart-sass 是由 dart 实现的,通过 dart vm 运行 dart 是编译 sass(在 npm 可以看到该包已不被开放下载了)
- node-sass 是由 node 调用 底层 c++ 实现的 libsass 来编译 sass
相关文章:https://www.cnblogs.com/yyh1/p/15954139.html
6.eslint代码检查
相关文档:https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint
关闭代码检查:https://blog.csdn.net/wumingid/article/details/104672576
Vue-Cli配置说明
官方文档:https://cli.vuejs.org/zh/config
1.pluginOptions
这是一个不进行任何 schema 验证的对象,因此它可以用来传递任何第三方插件选项。(webpack)
2.configureWebpack
如果这个值是一个对象,则会通过 webpack-merge 合并到最终的配置中。
如果这个值是一个函数,则会接收被解析的配置作为参数。该函数既可以修改配置并不返回任何东西,也可以返回一个被克隆或合并过的配置版本。
webpack简单配置方式
https://cli.vuejs.org/zh/config/?#configurewebpack
3.chainWebpack
是一个函数,会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。
相关文章
- 发现 Linux SpaceFM 文件管理器的威力
- 夯实数据智能底座 共筑数字经济发展“新基石”
- 五分钟教你使用console.log发布公司的招聘信息
- 微软发布 Windows 11 Beta 预览版 Build 22621.1250 和 22623.1250 (KB5023008)
- Windows 11 学院:在 Windows 11 Build 25290 上如何为文件管理器启用标签页拖拽支持
- 微软Windows 11 Dev 预览版 Build 25290 发布:带来新的开始菜单提醒角标
- 微软正用全屏通知提醒 Windows 10 用户免费升级 Windows 11,要点击 5 次才能退出
- Linux Mint 21.2 将于 6 月发布:改进登录屏幕,优化 Pix 图像管理程序等等
- 字节面试也会问SPI机制?
- 微软正式停售 Windows 10 产品密钥 / 许可证:继续提供 ISO 镜像下载,推荐用户升级 Windows 11
- 用复古电脑程序 Toy CPU 学习低级编程
- Windows 11 新功能泄露:现代音量合成器、实验工具和新的文件管理器
- 微软 Windows 11 文件资源管理器全新设计曝光:UI 迎来大修,整合 Microsoft 365
- 对比Pandas,学习PySpark大数据处理
- 微软宣布为Windows 11 21H2设备开启自动更新到22H2版本
- 互联网都在说降本增效,小红书技术团队是怎么做的?
- 微软将继续提供 Windows 10 ISO 镜像下载,即将停售产品密钥 / 许可证
- 微软宣布为Windows 11 21H2 设备开启自动更新到 22H2 版本
- 面试突击:Properties和Yml有什么区别?
- 微软 Windows 11 Beta 预览版 22621.1245 和 22623.1245 (KB5022358) 发布