优化：
? ? ? ? 1.通过nprogress添加
? ? ? ? ? ? ? ? 下载依赖 npm i --save nprogress
? ? ? ? ? ? ? ? 在main.js中引入
????????????????//?导入NProgress对应的js和css
????????????????import?NProgress?from?'nprogress'
????????????????import?'nprogress/nprogress.css'
? ? ? ? ? ? ? ? ?在axios封装中引入nprogress? ? ? ? ? ??
import NProgress from 'nprogress'
// request 拦截器 request interceptor
service.interceptors.request.use(
config =>{
在request中打开进度条
第二步：NProgress.start()
if (store.state.token) {
config.headers['Authorization'] = store.state.token
}
return config
}, error => {
console.log(error) // for debug
return Promise.reject(error)
})
第一步 ：service.interceptors.response.use(config => {
return config
})
// respone拦截器
service.interceptors.response.use(response => {
第三步：在respone拦截器中隐藏进度条
NProgress.done()
const res = response.data
if (res.status && res.status !== 200) {
// 登录超时,重新登录
if (res.status === 401) {
store.dispatch('FedLogOut').then(() => {
location.reload()
})
}
return Promise.reject(res || 'error')
} else {
return Promise.resolve(res)
}
},
error => {
console.log('err' + error) // for debug
return Promise.reject(error)
}
)
export default service?2.在打包进行时去除console.log
? ? ? ? 在百度搜索babel-plugin-transform-remove-console
????????
? ? ? ? 在babel.config.js下的plugins配置transform-remove-console
?3.生成打包报告
? ? ? ? 生成打包报告是为了更直观的发现项目中存在的问题
? ? ? ? 它有两种方式：
? ? ? ? ? ? ? ? 1.通过命令形参数的形式生成报告
????????
? ? ? ? ? ? ? ? ? ? ? ? ?直接在package.json中的"build":?"vue-cli-service?build?--report"中配置然后进行打包 ，就会自动生成report.html文件
? ? ? ? ? ? ? ? 2.通过可视化ui面板直接查看报告（推荐）?
? ? ? ? ? ? ? ? ? ? ? ? 在可视化ui面板中，通过控制台和分析面板，可以方便看到项目中存在的问题
4.通过 chainWebpack 自定义打包入口
? ? ? ? ? ? ? ? 在项目根目录中创建vue.config.js文件
? ? ? ? ? ? ? ? 重新命名main.js文件 改为main-dev.js
? ? ? ? ? ? ? ? 再在src下新建一个main-prod.js文件 这个文件下放的东西 跟原来的main.js中的东西一致? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ?然后再在vue.config.js文件中配置：
module.exports = {
chainWebpack:config=>{
//发布模式
config.when(process.env.NODE_ENV === 'production',config=>{
//entry找到默认的打包入口，调用clear则是删除默认的打包入口
//add添加新的打包入口
config.entry('app').clear().add('./src/main-prod.js')
})
//开发模式
config.when(process.env.NODE_ENV === 'development',config=>{
config.entry('app').clear().add('./src/main-dev.js')
})
}
}4.加载外部CDN
依赖项的所有第三方包都会被打包到js/chunk-vendors.******.js文件中，导致该js文件过大
那么我们可以通过externals排除这些包
在vue.config.js文件中配置：
module.exports = {
publicPath: './',
chainWebpack: config => {
productionSourceMap: false,
//发布模式
config.when(process.env.NODE_ENV === 'production', config => {
//entry找到默认的打包入口，调用clear则是删除默认的打包入口
//add添加新的打包入口
config.entry('app').clear().add('./src/main-prod.js')
//使用externals设置排除项
config.set('externals', {
vue: 'Vue',
'vue-router': 'VueRouter',
axios: 'axios',
lodash: '_',
echarts: 'echarts',
nprogress: 'NProgress',
'vue-quill-editor': 'VueQuillEditor'
})
})
//开发模式
config.when(process.env.NODE_ENV === 'development', config => {
config.entry('app').clear().add('./src/main-dev.js')
})
}
}使用cdn来优化element-ui
? ? ? ? 1.在main-prod.js中，注释掉element-ui按需加载的代码
????????
? ? ? ? 2.在public下的index.html的头部区域中，通过CDN加载?element-ui的js和css样式
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<!-- nprogress 的样式表文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />
<!-- 富文本编辑器 的样式表文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css" />
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css" />
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css" />
<!-- element-ui 的样式表文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.4.5/theme-chalk/index.css" />
<script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script src="https://cdn.staticfile.org/lodash.js/4.17.11/lodash.min.js"></script>
<script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script>
<script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>
<!-- 富文本编辑器的 js 文件 -->
<script src="https://cdn.staticfile.org/quill/1.3.4/quill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js"></script>
<!-- element-ui 的 js 文件 -->
<script src="https://cdn.staticfile.org/element-ui/2.4.5/index.js"></script>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
加入之后页面中会报错
????????
?只需要将页面中element-ui版本号改为2.4.5即可
<!-- element-ui 的样式表文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.4.5/theme-chalk/index.css" />
<!-- element-ui 的 js 文件 -->
<script src="https://cdn.staticfile.org/element-ui/2.4.5/index.js"></script>