Skip to main content

Vue 全局配置详解

全局配置是 Vue 应用开发中的重要部分，合理的配置可以提高开发效率、统一项目风格并优化应用性能。以下是 Vue 2 和 Vue 3 的全局配置指南。

一、Vue 2 全局配置

1. Vue 构造函数配置

import Vue from 'vue'

// 全局配置
Vue.config.productionTip = false // 关闭生产环境提示
Vue.config.devtools = process.env.NODE_ENV !== 'production' // 开发环境启用devtools
Vue.config.errorHandler = (err, vm, info) => {
  // 全局错误处理
  console.error('Vue error:', err, info)
}

2. 全局指令

// 注册全局指令
Vue.directive('focus', {
  inserted(el) {
    el.focus()
  }
})

// 使用
<input v-focus />

3. 全局组件

// 注册全局组件
import GlobalButton from '@/components/GlobalButton.vue'

Vue.component('GlobalButton', GlobalButton)

// 使用
<global-button />

4. 全局混入

// 全局混入
Vue.mixin({
  created() {
    console.log('全局混入的created钩子')
  },
  methods: {
    $formatDate(date) {
      // 全局日期格式化方法
      return new Date(date).toLocaleDateString()
    }
  }
})

5. 全局过滤器

// 注册全局过滤器
Vue.filter('currency', (value) => {
  return '$' + value.toFixed(2)
})

// 使用
<div>{{ price | currency }}</div>

二、Vue 3 全局配置

1. 应用实例配置

import { createApp } from 'vue'

const app = createApp(App)

// 全局配置
app.config.globalProperties.$appName = 'My App' // 添加全局属性
app.config.errorHandler = (err, vm, info) => {
  // 全局错误处理
  console.error('Vue error:', err, info)
}
app.config.warnHandler = (msg, vm, trace) => {
  // 警告处理
  console.warn('Vue warn:', msg, trace)
}

2. 全局组件 (Vue 3)

// 注册全局组件
import GlobalButton from '@/components/GlobalButton.vue'

app.component('GlobalButton', GlobalButton)

3. 全局指令 (Vue 3)

// 注册全局指令
app.directive('focus', {
  mounted(el) {
    el.focus()
  }
})

4. 全局 provide/inject

// 提供全局依赖
app.provide('appVersion', '1.0.0')

// 在组件中使用
export default {
  inject: ['appVersion'],
  created() {
    console.log(this.appVersion) // 1.0.0
  }
}

三、路由全局配置

1. 路由守卫

import router from './router'

// 全局前置守卫
router.beforeEach((to, from, next) => {
  const isAuthenticated = checkAuth()
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login')
  } else {
    next()
  }
})

// 全局后置钩子
router.afterEach((to, from) => {
  document.title = to.meta.title || 'Default Title'
})

2. 路由错误处理

router.onError((error) => {
  console.error('路由错误:', error)
  // 可以跳转到错误页面
})

四、状态管理全局配置

1. Vuex 全局配置

import Vuex from 'vuex'

const store = new Vuex.Store({
  state: {
    count: 0
  },
  // 全局插件
  plugins: [createLogger()]
})

// 全局注入
Vue.prototype.$store = store

2. Pinia 全局配置 (Vue 3)

import { createPinia } from 'pinia'

const pinia = createPinia()

// 全局插件
pinia.use((context) => {
  console.log(`Store ${context.store.$id} created`)
})

app.use(pinia)

五、HTTP 请求全局配置

1. Axios 全局配置

import axios from 'axios'

// 创建实例
const http = axios.create({
  baseURL: process.env.VUE_APP_API_URL,
  timeout: 10000
})

// 请求拦截
http.interceptors.request.use((config) => {
  config.headers.Authorization = `Bearer ${getToken()}`
  return config
})

// 响应拦截
http.interceptors.response.use(
  (response) => response.data,
  (error) => {
    if (error.response.status === 401) {
      // 处理未授权
    }
    return Promise.reject(error)
  }
)

// 全局挂载
Vue.prototype.$http = http

六、UI 框架全局配置

1. Element UI 全局配置

import ElementUI from 'element-ui'

Vue.use(ElementUI, {
  size: 'small',
  zIndex: 3000
})

2. Ant Design Vue 全局配置

import Antd from 'ant-design-vue'

app.use(Antd)

七、样式全局配置

1. 全局样式文件

// styles/global.scss

// 变量定义
$primary-color: #1890ff;

// 混合宏
@mixin ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// 全局样式
body {
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

2. 在项目中引入

// main.js
import '@/styles/global.scss'

八、环境变量全局配置

1. .env 文件配置

# .env.development
VUE_APP_API_URL=http://dev.api.example.com
VUE_APP_DEBUG=true

# .env.production
VUE_APP_API_URL=https://api.example.com

2. 使用环境变量

const baseURL = process.env.VUE_APP_API_URL

九、性能优化全局配置

1. 生产环境禁用警告

Vue.config.silent = process.env.NODE_ENV === 'production'

2. 性能监控

Vue.config.performance = process.env.NODE_ENV !== 'production'

十、最佳实践建议

  1. 合理使用全局配置：避免过度使用全局配置，保持代码可维护性
  2. 命名规范：全局属性/方法建议添加前缀（如 $appName）
  3. 类型安全：在 TypeScript 项目中扩展全局类型定义 
    declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $appName: string
  }
}
  4. 按需加载：大型库（如 UI 框架）建议按需引入
  5. 文档记录：完善的全局配置文档有助于团队协作

合理的全局配置可以显著提升 Vue 应用的开发效率和运行性能，建议根据项目实际需求选择适当的配置方案。

No Comments
Back to top