Vite結(jié)合Vue刪除指定環(huán)境的console.log問(wèn)題
更新時(shí)間：2023年03月11日 16:51:40 作者：小火車況且況且
這篇文章主要介紹了Vite結(jié)合Vue刪除指定環(huán)境的console.log問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
Vite結(jié)合Vue刪除指定環(huán)境的console.log
Vite結(jié)合Vue刪除指定環(huán)境的console.log
1.可以通過(guò)配置build.minify和build.terserOptions
不推薦是因?yàn)榇虬俣葧?huì)變慢, 并且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.通過(guò)賦值為空函數(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項(xiàng)目打包并去掉所有的console.log輸出
- npm run build 生成dist文件夾
- 路由懶加載
- 去掉所有的console 安裝插babel-plugin-remove-console(項(xiàng)目上線時(shí)要用到的插件) npm i babel-plugin-transform-remove-console -D
- 移除打包的第三方包
// 項(xiàng)目在發(fā)布時(shí)需要用到的 babel 插件數(shù)組
const proPlugins = []
// 如果當(dāng)前是測(cè)試環(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é)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
使用electron打包Vue前端項(xiàng)目的詳細(xì)流程
這篇文章主要介紹了使用electron打包Vue前端項(xiàng)目的詳細(xì)流程,文中通過(guò)圖文結(jié)合的方式給大家介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)electron打包Vue有一定的幫助,需要的朋友可以參考下2024-04-04
vue 路由懶加載中給 Webpack Chunks 命名的方法
這篇文章主要介紹了在 vue 路由懶加載中給 Webpack Chunks 命名的方法，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-04-04
vue如何使用mapbox對(duì)當(dāng)前行政區(qū)劃進(jìn)行反選遮罩
這篇文章主要介紹了vue如何使用mapbox對(duì)當(dāng)前行政區(qū)劃進(jìn)行反選遮罩問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue項(xiàng)目打包成Docker鏡像包的簡(jiǎn)單步驟
最近做時(shí)速云項(xiàng)目部署,需要將前端項(xiàng)目打成鏡像文件,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目打包成Docker鏡像包的簡(jiǎn)單步驟,需要的朋友可以參考下2023-10-10
Vue全家桶實(shí)踐項(xiàng)目總結(jié)(推薦)
本篇文章主要介紹了Vue全家桶實(shí)踐項(xiàng)目總結(jié)(推薦)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
Vue.js計(jì)算屬性computed與watch（5）
這篇文章主要為大家詳細(xì)介紹了Vue.js計(jì)算屬性computed與watch,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了VSCode使用之Vue工程配置eslint，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-04-04
這篇文章主要為大家介紹了elementui?el-calendar日歷組件使用示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-12-12
詳解基于Vue2.0實(shí)現(xiàn)的移動(dòng)端彈窗(Alert, Confirm, Toast)組件
這篇文章主要介紹了詳解基于Vue2.0實(shí)現(xiàn)的移動(dòng)端彈窗(Alert, Confirm, Toast)組件，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
Vue表單提交點(diǎn)擊事件只允許點(diǎn)擊一次的實(shí)例
這篇文章主要介紹了Vue表單提交點(diǎn)擊事件只允許點(diǎn)擊一次的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10