vue优化建议 - 技术栈

vue优化建议

李白的天不白2026-05-09 9:16

1，安装webpack-bundle-analyzer

npm i webpack-bundle-analyzer -D

2.vuex

javascript 复制代码

import Vue from 'vue'
import {Store, install} from 'vuex'
import banner from "./banner"
import setting from "./setting"
import about from "./about"
install(Vue)
// Vue.use(Vuex)

export default new Store({ 
  modules: {
    banner,
    setting,
    about,
  },
  strict: true,
})

3.异步引入路由文件

javascript 复制代码

export default [
  { name: "Home", path: "/", component: import("@/views/Home"),meta: { title: "首页" } },
  { name: "about", path: "/about", component: import("@/views/About"),meta: { title: "关于我" } },
  { name: "Blog", path: "/article", component: import("@/views/Blog"),meta: { title: "文章" } },
  { name: "CategoryBlog", path: "/article/cate/:categoryId", component: import("@/views/Blog"),meta: { title: "文章" } },
  { name: "BlogDetail", path: "/article/:id", component: import("@/views/BlogDetail") ,meta: { title: "文章详情" } },
  { name: "Message", path: "/massege", component: import("@/views/Message"),meta: { title: "留言板" } },
  { name: "Project", path: "/project", component: import("@/views/Project"),meta: { title: "项目&效果" } },
]