Vue CLI3 3.x 配置 vue.config.js 清除 console

Vue CLI3 3.x 配置 vue.config.js 清除 console

导读 网上看了几种方式不是无效就是报错,可能是版本差异较大导致。通过自己实践,亲测了一种可行的清除 console 的方式。

使用 uglifyjs-webpack-plugin


// 我的 Vue ClI 版本

Vue cli 3.x

// 我的 uglifyjs-webpack-plugin 版本 ^2.1.3
  1. 第一步 安装 uglifyjs-webpack-plugin

    npm i uglifyjs-webpack-plugin --save-d
    
  2. 在 vue.config.js 添加如下配置


const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
### 配置 Vue 3 CLI 创建的项目中的 `eslint.config.js` 文件 对于在 Vue 3 CLI 中创建的新项目,配置 ESLint 是为了确保代码风格的一致性和质量控制。以下是具体方法: #### 安装依赖包 首先,在命令行工具中进入项目的根目录并安装必要的 ESLint 插件和支持库。 ```bash npm install --save-dev eslint @vue/eslint-config-prettier eslint-plugin-vue prettier ``` 这一步骤会下载用于解析 JavaScript 和 Vue 特定语法错误所需的插件[^1]。 #### 创建 `.eslintrc.js` 文件 接着,在项目根目录下新建名为`.eslintrc.js` 的文件,并向其中添加如下基础配置: ```javascript module.exports = { root: true, env: { node: true }, extends: [ "plugin:vue/vue3-essential", "@vue/standard" ], parserOptions: { ecmaVersion: 2020 }, rules: { // 自定义规则可以在这里定义 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' } }; ``` 上述配置扩展了两个主要部分:“plugin:vue/vue3-essential”,它包含了针对 Vue 3 应用程序的核心规则;而 “@vue/standard” 则遵循标准编码规范[^2]。 #### 修改 `package.json` 脚本 为了让 VSCode 或其他编辑器能够自动执行 ESLint 检查,可以在 `package.json` 文件内的 scripts 字段里加入 lint 命令以便于运行时调用: ```json { ... "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "test:unit": "vue-cli-service test:unit", "lint": "eslint src/**/*.js" }, ... } ``` 此脚本允许开发者通过 npm run lint 来手动触发整个源码树下的 JS 文件检查操作[^3]。 完成以上步骤之后,ESLint 就已经成功集成到了 Vue 3 CLI 构建体系当中。每次保存文件时都会依据设定好的规则来检测潜在问题,从而帮助维护良好的编程习惯和技术债务管理。
评论 3
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值