vue项目的main.js规划设计与合理使用

一、背景简介

为什么写这么篇文章？

（1）最近刚换了份工作，接手了一个很庞大的项目，16g的内存，项目启动后直接把内存拉到90%

（2）暂且不说项目好坏，项目接口调用中有个调用接口方法this.portService，我看了下vue页面本身和mixins文件，都没有data声明或者引用这个portService，这时候我不禁纳闷，数据到底放在哪里了！！！！此处是重点，他居然把他所有的接口请求封装的js文件都在main.js里全局引入

二、main.js的核心作用与定位

main.js是Vue项目的入口文件，主要负责初始化Vue实例并配置全局设置。作为应用的单一入口点，它承担着创建Vue实例、管理全局配置和依赖的重要职责。在Vue 2中通常使用new Vue()语法，而Vue 3则采用createApp()函数来创建应用实例。

该文件的主要作用可概括为三点：1)实例化Vue；2)放置常用插件和CSS样式；3)存储全局变量。其典型结构包括导入Vue库和根组件、配置路由和状态管理、创建并挂载Vue实例等基本要素

三、适合放入main.js的内容

1. Vue实例初始化配置

main.js最核心的功能是创建和配置Vue实例，包括挂载目标元素(el或$mount)、根组件渲染(render函数)等基础配置。这是所有Vue项目main.js必须具备的内容：

复制代码

import Vue from 'vue'
import App from './App.vue'
new Vue({
  render: h => h(App)
}).$mount('#app')

2. 全局插件注册

通过Vue.use()注册需要全局使用的插件，如Vue Router、Vuex、Element UI等第三方库。例如Element UI的引入：

复制代码

import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(Element)

3.全局组件注册

对于频繁使用的公共组件，可在main.js中全局注册以避免重复导入：

复制代码

import Loading from './components/Loading.vue'
Vue.component('Loading', Loading)

4. 全局过滤器与混入

定义全局过滤器可增强模板功能，实现数据预处理：

复制代码

import * as filters from './filters'
Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})

5. 全局样式与工具库

基础CSS/LESS文件和常用工具库(如axios)适合在main.js引入：

复制代码

import '@/assets/base.less'
import axios from 'axios'
Vue.prototype.$axios = axios

6. 生产环境配置

禁用生产提示等环境相关配置应置于main.js：

复制代码

Vue.config.productionTip = false

三、不适合放入main.js的内容

1. 业务逻辑代码

main.js应保持简洁，避免包含具体的业务逻辑实现。业务代码应分散到各组件或模块中。

2. 大量局部组件

非全局使用的组件不应在main.js注册，而应在使用它们的组件内局部注册。

3. 频繁变动的配置

如API地址等可能频繁修改的配置，建议放入专用配置文件而非main.js。

4. 复杂的状态管理

虽然可以引入Vuex，但store的具体实现应放在单独模块中。

5. 过度庞大的第三方库

非必要的重型库应延迟加载或按需引入，避免增加初始包体积。

四、最佳实践建议

‌保持简洁‌：main.js应专注于初始化工作，避免过度膨胀。理想情况下不应超过200行代码。
‌模块化组织‌：将相关配置拆分到单独文件(如过滤器、混入等)，再在main.js中统一引入。
‌版本适配‌：Vue 2与Vue 3的main.js结构不同，需注意语法差异。
‌环境隔离 ‌：使用create-vue等工具隔离依赖，避免全局污染。
‌合理注释‌：对各项配置添加必要注释，说明用途和修改记录。

通过合理规划main.js的内容结构，可以构建出更清晰、更易维护的Vue项目架构，为后续开发奠定良好基础