1.使用UglifyJsPlugin 插件来压缩代码和移除console。
在webpack.prod.conf.js中添加以下代码
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
drop_console: true,
pure_funcs: ['console.log']
},
sourceMap: false
})
2.在webpack.base.conf.js中添加下面代码，是为了打包是不带入以下文件
module.exports = { ... externals: { AMap: "AMap",
vue: 'Vue',
'vue-router': 'VueRouter',
'element-ui': 'ELEMENT',}
...
}
2.1.在index.html中(这里是vue项目中的index不是dist文件中的index)添加以下代码
2.2.在入口文件中(我的是main.js)中将以下代码删除或者注释
import ElementUI from 'element-ui'
Vue.use(ElementUI)3.路由懒加载
import index from './views/index/index.vue'
{ path: '/', component: index, name: '', hidden: true }
将上面代码改为
{
path: '/',
component: ()=>import('./views/index/index.vue'),
name: '',
hidden: true
}
4.vue cli 项目开启Gzip的链接
5.修改路由
import Vue from 'vue'
import Router from 'vue-router'
// 解决element.ui上重复点击导航栏报的警告
const originalPush = Router.prototype.push
Router.prototype.push = function push (location) {
return originalPush.call(this, location).catch(err => err)
}
let rou = null
// 路由
let constantRouterMap = [
{
path: '/login',
name: 'login',
component: () => import('@//view/login')
},
{ name: 'default', path: '*', redirect: { name: 'dbManage' } }
]
// 开发环境
if (process.env.NODE_ENV === 'development') {
Vue.use(Router)
rou = new Router({
scrollBehavior: () => ({ y: 0 }),
routes: constantRouterMap
})
} else {
rou = new VueRouter({
// base: '/',
scrollBehavior: () => ({ y: 0 }),
routes: constantRouterMap
})
}
export default rou
