Vue-Cli该如何使用？Vue-Cli学习笔记，持续记录

2023-02-17 14:49:07 浏览数 (1)

Vue-cli学习记录

1.模式和环境变量

修改.Env环境变量文件之后，需要重新运行server才会生效。环境变量通过process.ENV访问。可以在项目根目录中放置下列文件来指定环境变量：

代码语言：javascript复制
.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#模式

模式是 Vue CLI 项目中一个重要的概念。默认情况下，一个 Vue CLI 项目有三个模式：

代码语言：javascript复制
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/#全局-cli-配置

配置项说明：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）

代码语言：javascript复制
npm list vue

查看vue-cli的版本号，通过命令行

代码语言：javascript复制
vue -V

4.scss版本过高导致无法编译

Vue-cli使用scss是不需要进行任何配置的，npm安装的时候安装的最新的scss-loader 13.x，导致vue-cli 5.x编译一直失败，卸载强制安装7.x的scss-loader后编译成功。以下为scss安装命令：

代码语言：javascript复制
npm install sass -D /* 局部安装  */
npm install sass-loader -D /* 局部安装  */

相关文档：https://blog.csdn.net/weixin_43856797/article/details/115966706

  1. node-sass 把 sass编译成css
  2. sass-loader 是webpack的一个loader,  让构建工具可以处理.scss文件。

5.sass各种包的说明

  1. sass 是由 ts调用 dart-sass实现的工具类，来编译 sass（以前是由单纯的 ts实现的）
  2. dart-sass 是由 dart 实现的,通过 dart vm 运行 dart 是编译 sass（在 npm 可以看到该包已不被开放下载了）
  3. 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/@vue/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 配置进行更细粒度的修改。

网络安全 https sass webpack vue.js

0 人点赞