Vue2 入口文件核心配置详解

一、Vue 实例化

1. new Vue() 的核心配置

在 Vue2 中，main.js 作为应用的入口文件，其核心任务是创建 Vue 根实例并挂载到 DOM。以下是关键配置选项：

new Vue({
  // 1. 挂载目标 (必需)
  el: '#app',
  
  // 2. 渲染函数 (与 template 二选一)
  render: h => h(App),
  
  // 3. 模板 (需要 compiler 版本)
  template: '<App/>',
  
  // 4. 注册局部组件
  components: { App },
  
  // 5. 其他选项...
  router,
  store,
  data: { /* 根实例数据 */ }
}).$mount('#app') // 替代 el 的挂载方式

实践建议：

• 使用 render 函数而非 template 可以减小打包体积（无需模板编译器）
• 在组件库开发时，el 通常由使用者指定，此时应使用 $mount() 延迟挂载

2. 根实例与组件树关系

关键点：

• 根实例是所有组件的"祖先"
• 通过 render: h => h(App) 将 App 组件作为根组件
• 组件树形成后，数据/事件通过 props/$emit 流动

二、全局依赖注入

1. Vue.prototype 扩展

// 添加全局 API 接口
Vue.prototype.$api = axios.create({
  baseURL: process.env.VUE_APP_API_URL
})

// 添加全局工具方法
Vue.prototype.$formatDate = (timestamp) => {
  return new Date(timestamp).toLocaleString()
}

使用方式：

this.$api.get('/user')
this.$formatDate(Date.now())

注意事项：

• 避免覆盖 Vue 原生方法（不要以 $ 或 _ 开头）
• 复杂逻辑建议封装成插件而非直接挂载

2. 全局混入 (Vue.mixin)

Vue.mixin({
  created() {
    if (this.$options.debug) {
      console.log(`${this.$options.name} created`)
    }
  }
})

风险提示：

• 混入会影响所有组件，可能导致命名冲突
• 优先使用局部混入或高阶组件方案
• 适合做全局逻辑（如权限检查、埋点）

三、环境变量与动态配置

1. 环境区分

// 配置不同的 API 地址
let apiBaseUrl
if (process.env.NODE_ENV === 'development') {
  apiBaseUrl = 'http://dev.api.com'
} else if (process.env.NODE_ENV === 'production') {
  apiBaseUrl = 'https://api.example.com'
}

// 或者使用 .env 文件
Vue.config.productionTip = process.env.NODE_ENV === 'development'

2. 动态加载第三方库

// 检查是否已通过 CDN 引入
if (!window._) {
  // 动态加载 lodash
  import('lodash').then(_ => {
    window._ = _
    initVueApp()
  })
} else {
  initVueApp()
}

function initVueApp() {
  new Vue({ /* ... */ })
}

最佳实践：

• 大型库（如 ECharts）推荐 CDN + 动态加载
• 使用 webpack externals 避免重复打包

关键配置示例

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// 全局样式
import './styles/normalize.css'
import './styles/global.less'

// 生产环境禁用警告
Vue.config.productionTip = false

// 全局错误处理
Vue.config.errorHandler = (err, vm, info) => {
  console.error(`Error: ${err.toString()}\nInfo: ${info}`)
  // 上报错误到监控系统
}

// 实例化 Vue
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

通过合理配置入口文件，可以为整个 Vue 应用奠定良好的基础架构，后续开发会更加高效和可控。