1. 使用CDN
這里把常用的vue、vuex、elementui、echarts、axios都引入成cdn的方式
1、在index.html引入CDN
找到public/index.html在上方引入下邊的cdn。
[!NOTE]
引入script的時候，一定要把vue.js放到最上邊，最先引入，不然后邊的js加載會有問題
<!-- 引入樣式 --><link href="https://cdn.bootcss.com/element-ui/2.8.2/theme-chalk/index.css" rel="stylesheet"><link href="https://cdn.bootcss.com/element-ui/2.15.14/theme-chalk/index.css" rel="stylesheet"><script src="https://cdn.bootcss.com/vue/2.7.14/vue.min.js"></script><script src="https://cdn.bootcss.com/element-ui/2.15.14/index.js"></script><script src="https://cdn.bootcss.com/vue-router/3.6.5/vue-router.min.js"></script><script src="https://cdn.bootcss.com/vuex/3.6.2/vuex.min.js"></script><script src="https://cdn.bootcss.com/axios/1.11.0/axios.min.js"></script><script src="https://cdn.bootcss.com/echarts/6.0.0/echarts.min.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/vue-echarts/6.7.3/index.esm.min.js"></script>
2、批量注釋掉引用
在main.js項目主js或者ts中去除對element 、vue、vuex、echarts、axios的引用
全局搜索
// import Vue from 'vue'
// import Vuex from 'vuex'
// import ElementUI from 'element-ui'
// import 'echarts'
// import request from 'axios'
// import { MessageBox } from 'element-ui'
// import { Loading, Message, MessageBox, Notification } from 'element-ui'
把這些直接引用的地方都注釋掉
3、main.js（指定文件排查）
在mian.js中注釋掉 element 、vue、vuex、echarts、axios的引用
其中**Vue.use(Elment)**要注釋掉。不然啟動會報錯
4、router/index.js（指定文件排查）
注釋掉
// import Vue from 'vue'
// import VueRouter from 'vue-router'
保留
Vue.use(VueRouter)
[!NOTE]
這里要注意一下，
Vue.use(VueRouter)中的VueRouter不能改為其他字段,否則會報錯
5、store/index.js（指定文件排查）
注釋掉
// import Vue from 'vue'
// import Vuex from 'vuex'
保留
Vue.use(Vuex)
6、webpack出去除依賴
在webpack的配置文件中去除對vue、vuex、axios、echarts、element等的依賴。
查看主目錄的vue.config.js或者webpack.config.js之類的打包配置文件
也可以搜索module.exports = {此文件中就可以加上配置，去除以來
module.exports = {// 引入外部庫, 無需webpack打包處理externals: {'vue' : 'Vue','vue-router':'VueRouter','vuex':'Vuex','axios':'axios','element-ui':'ElementUI','mockjs': 'Mock','echarts': 'echarts','ueditor': 'UE'}
}
2. 路由懶加載
router/index.js中
路由使用懶加載模式
// import Vue from 'vue'
// import VueRouter from 'vue-router'
import Layout from '@/layouts'
import { publicPath, routerMode } from '@/config'Vue.use(VueRouter)
export const constantRoutes = [{path: '/login',component: () => import('@/views/login/index'),hidden: true,},{path: '/register',component: () => import('@/views/register/index'),hidden: true,},{path: '/401',name: '401',component: () => import('@/views/401'),hidden: true,},{path: '/404',name: '404',component: () => import('@/views/404'),hidden: true,},
]
// 路由懶加載
const device = ()=> import("@/views/device/index")
const deviceVersion = ()=> import("@/views/deviceVersion/index")
const mqttUser = ()=> import("@/views/mqttUser/index")
const role = ()=> import("@/views/personnelManagement/roleManagement/index")
const user = ()=> import("@/views/personnelManagement/userManagement/index")
export const asyncRoutes = [{path: '/',component: Layout,redirect: '/index',children: [{path: 'index',name: 'Index',component: () => import('@/views/index/index'),meta: {title: '首頁',icon: 'home',affix: true,},},],},{path: "/device",component: Layout,redirect: "noRedirect",children: [{path: "index",name: "Index",component: device,meta: {title: "設備管理",icon: "vector-square",permissions: ["admin"],},},],},{path: "/deviceVersion",component: Layout,redirect: "noRedirect",children: [{path: "index",name: "Index",component: deviceVersion,meta: {title: "設備版本",icon: "cloud-upload-alt",permissions: ["admin"],},},],},{path: "/mqttUser",component: Layout,redirect: "noRedirect",children: [{path: "index",name: "Index",component: mqttUser,meta: {title: "設備接入",icon: "cube",permissions: ["admin"],},},],},{path: "/role",component: Layout,redirect: "noRedirect",children: [{path: "index",name: "Index",component: role,meta: {title: "角色管理",icon: "diagnoses",permissions: ["admin"],},},],},{path: "/user",component: Layout,redirect: "noRedirect",children: [{path: "index",name: "Index",component: user,meta: {title: "用戶管理",icon: "user-friends",permissions: ["admin"],},},],},{path: '*',redirect: '/404',hidden: true,},
]const router = new VueRouter({base: publicPath,mode: routerMode,scrollBehavior: () => ({y: 0,}),routes: constantRoutes,
})export function resetRouter() {location.reload()
}export default router3. Nginx開啟Gzip壓縮
在 http 或 server 模塊中添加配置
server {# 其他配置...gzip on; # 開啟gzip壓縮gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript image/png image/gif image/jpeg; # 設置需要壓縮的文件類型gzip_comp_level 6; # 設置gzip的壓縮級別，1-9，9最壓縮，但最耗時gzip_buffers 16 8k; # 設置系統獲取幾個單server存儲gzip的壓縮結果數據流。gzip_http_version 1.1; # 設置識別HTTP協議版本，默認1.1gzip_vary on; # 此指令可以讓前端的緩存服務器緩存在不同的壓縮方式上。# gzip_proxied any; # 對于后端服務器返回的數據進行壓縮，默認不對數據進行壓縮。
}
重啟nginx使配置生效
/usr/local/nginx/sbin/nginx -s reload
