1发布之后移除所有console.log

1.1安装对应插件

去除console.log

1.2在项目中的babel.config.js文件中添加如下代码即可

1.3如果我们只在发布模式下删除console.log做如下操作

2通过vue.config.js修改webpack的默认配置

2.1在项目的根目录创建vue.config.js文件,用来修改webpack默认配置

2.2为开发模式与发布模式指定不同的打包入口

指定打包入口

2.3有两种修改配置的方式configureWebpack和chainWebpack我们使用第二种

介绍

2.3.1第一步修改,把mian.js入口文件复制两份分别命名

2.3.2第二步在vue.config.js中添加配置

3通过externals加载外部CDN资源

3.1在vue.config.js中添加入口文件的地方添加如下红色标记的代码,代码内容需要根据自己项目使用插件进行自定义

vue.config.js配置文件

3.2同时我们需要在项目根目录下的public/index.html中添加对应的js和css的CDN资源引用,具体需要根据自己项目需要自行添加,如下

添加CDN引用

tips:CDN资源引用,一般在对应插件的官网可以查找到

4通过CDN优化ElementUI的打包体积

介绍

4.1具体操作第一步注释生成入口文件的element-ui引入

4.2在index.html中添加对应的CDN引入

5首页内容定制

5.1修改首页标题内容,使用之前配置的值来判断是开发还是生产来判断显示内容

5.2是否采用CDN方式引入资源,也是根据之前设置的值来判断是否使用CDN

6路由懒加载

6.1第一步安装插件

插件

6.2在babel.config.js中添加配置

配置

6.3更换路由组件导入方式如下:

普通导入方式 使用插件后导入方式

tips: webpackChunkName后面的是组名,是自定义的,根据自己来设置就行,后面的是组件所在的路径