vue 打包优化以及项目打包本地预览

优化策略

第一：安装插件babel-plugin-transform-remove-console： 自动清除console.log()

修改 babel.config.js 文件

let transformRemoveConsolePlugin = []
if (process.env.NODE_ENV === 'production') {
  transformRemoveConsolePlugin = ['transform-remove-console']
}
module.exports = {
  plugins: [
    ...transformRemoveConsolePlugin
  ]
}

第二：区分生产环境和测试环境打包入口main.js

为啥要区分生产环境和测试环打包入口呢
因为打包生产环境的时候element-ui还是打包了，体积还是很大，只能把它注释掉。注释掉后，测试环境就会报element-ui未引入错误，所以区分了。
不知道有啥办法，欢迎留言，解决办法。

测试环境main.js

import Vue from 'vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui'
import App from './App.vue'

Vue.use(ElementUI)
Vue.config.productionTip = false

new Vue({
   
  router,
  store,
  render: h => h(App)
}).$mount('#app')