Vite結(jié)合Vue刪除指定環(huán)境的console.log問題

更新時間：2023年03月11日 16:51:40 作者：小火車況且況且

這篇文章主要介紹了Vite結(jié)合Vue刪除指定環(huán)境的console.log問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

Vite結(jié)合Vue刪除指定環(huán)境的console.log

Vite結(jié)合Vue刪除指定環(huán)境的console.log

1.可以通過配置build.minify和build.terserOptions

build.minify
build.terserOptions
minify-options

不推薦是因為打包速度會變慢, 并且Vite3.x的版本配置了minify:'terser',需要下載yarn add terser -D

vite.config.ts文件

export default defineConfig(({ command, mode }) => {
return {
	...
	build: {
		minify: "terser",
		terserOptions: {
				compress: {
					drop_console : true	
				}
		}	
	}
	...
}
})

2.通過賦值為空函數(shù)

在main.ts中配置

...
// 這里的 VITE_ENV 是自定義的環(huán)境變量 參考 
// https://cn.vitejs.dev/guide/env-and-mode.html#env-variables
if (import.meta.env.VITE_ENV !== 'development') {
  console.log = function () {}
  // 還可以添加 .info .warn .error
}
...

Vue項目打包并去掉所有的console.log輸出

npm run build 生成dist文件夾
路由懶加載
去掉所有的console 安裝插babel-plugin-remove-console(項目上線時要用到的插件) npm i babel-plugin-transform-remove-console -D
移除打包的第三方包

// 項目在發(fā)布時需要用到的 babel 插件數(shù)組
const proPlugins = []
// 如果當(dāng)前是測試環(huán)境或者是生產(chǎn)環(huán)境，則使用去掉 console 的插件
if (process.env.NODE_ENV === 'test' || process.env.NODE_ENV === 'production') {
  proPlugins.push('transform-remove-console')
}
 
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      'component',
      {
        libraryName: 'element-ui',
        styleLibraryName: 'theme-chalk'
      }
    ],
    ...proPlugins
  ]
 
}

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

使用electron打包Vue前端項目的詳細(xì)流程
這篇文章主要介紹了使用electron打包Vue前端項目的詳細(xì)流程,文中通過圖文結(jié)合的方式給大家介紹的非常詳細(xì),對大家學(xué)習(xí)electron打包Vue有一定的幫助,需要的朋友可以參考下
2024-04-04
vue 路由懶加載中給 Webpack Chunks 命名的方法
這篇文章主要介紹了在 vue 路由懶加載中給 Webpack Chunks 命名的方法，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2020-04-04
vue如何使用mapbox對當(dāng)前行政區(qū)劃進行反選遮罩
這篇文章主要介紹了vue如何使用mapbox對當(dāng)前行政區(qū)劃進行反選遮罩問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
Vue項目打包成Docker鏡像包的簡單步驟
最近做時速云項目部署,需要將前端項目打成鏡像文件,下面這篇文章主要給大家介紹了關(guān)于Vue項目打包成Docker鏡像包的簡單步驟,需要的朋友可以參考下
2023-10-10
Vue全家桶實踐項目總結(jié)(推薦)
本篇文章主要介紹了Vue全家桶實踐項目總結(jié)(推薦)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-11-11
Vue.js計算屬性computed與watch（5）
這篇文章主要為大家詳細(xì)介紹了Vue.js計算屬性computed與watch,具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-12-12
VSCode使用之Vue工程配置eslint
這篇文章主要介紹了VSCode使用之Vue工程配置eslint，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-04-04
elementui?el-calendar日歷組件使用示例
這篇文章主要為大家介紹了elementui?el-calendar日歷組件使用示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
2023-12-12
詳解基于Vue2.0實現(xiàn)的移動端彈窗(Alert, Confirm, Toast)組件
這篇文章主要介紹了詳解基于Vue2.0實現(xiàn)的移動端彈窗(Alert, Confirm, Toast)組件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-08-08
Vue表單提交點擊事件只允許點擊一次的實例
這篇文章主要介紹了Vue表單提交點擊事件只允許點擊一次的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-10-10