vue打包的优化

打包

根目录创建vue.config.js文件

module.exports = {
    publicPath:'./'
}

cmd

vue ui

进入可视化工具先启动项目启动App

停止运行 ，再运行build

最后去dist 里index.html打开预览

优化console.log

强制隐藏console.log（在index.html里面写入）

    <script>
        console.log() = function(){
            
        }
    </script>

按需隐藏显示console.log（在babel.config,js里写入）

​ babel-plugin-transform-remove-console 开发依赖

//项目发布阶段需要用到的babel插件
const productPlugins = []

//判断是开发还是发布阶段
if (process.env.NODE_ENV === 'production') {
  //发布阶段
  productPlugins.push("transform-remove-console")
}

module.exports = {
  "presets": [
    '@vue/cli-plugin-babel/preset'
  ],
  "plugins": [
    // [
    //   "component",
    //   {
    //     "libraryName": "element-ui",
    //     "styleLibraryName": "theme-chalk"
    //   }
    // ],
    ...productPlugins
  ]

}

路由懒加载

      {
        path: '/roles',
        name: 'Roles',
        component: () => import(/* webpackChunkName: "模块名字" */ '../components/power/roles.vue'),
      },

webpack的默认配置修改入口文件

vue.config.js文件中添加以下<