vue3开发中常见的代码错误或者其他相关问题小文章3.0

21. 路由守卫配置错误

错误示例： 路由守卫配置不当导致页面导航或权限验证失败。

解决方案： 确保正确配置全局、路由级和组件内的守卫，并处理异步逻辑。

// 全局前置守卫
router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!isAuthenticated()) {
      next({ path: '/login' });
    } else {
      next();
    }
  } else {
    next();
  }
});

// 路由级守卫
{
  path: '/dashboard',
  component: Dashboard,
  beforeEnter: (to, from, next) => {
    // 检查权限等
    next();
  }
}

22. 环境变量配置错误

错误示例： 环境变量未正确配置，导致开发和生产环境中使用了错误的配置。

解决方案： 确保在 .env 文件中正确定义环境变量，并在代码中正确引用它们。

// .env.development
VUE_APP_API_URL=http://localhost:3000

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

// 在代码中使用
console.log(import.meta.env.VUE_APP_API_URL);

23. 图片和其他静态资源路径错误

错误示例： 静态资源路径错误导致图片或其他资源无法加载。

解决方案： 确保静态资源路径正确，并考虑使用相对路径或通过 public 目录访问。

<!-- 使用 public 目录 -->
<img src="/images/logo.png" alt="Logo">

<!-- 使用相对路径 -->
<img :src="require('@/assets/images/logo.png')" alt="Logo">

24. 第三方库与 Tree Shaking 不兼容

错误示例： 引入的第三方库没有被 tree-shaken，导致打包体积过大。

解决方案： 确保第三方库支持 ES Modules，并检查是否有按需引入的方式。

// 按需引入 Lodash
import _ from 'lodash-es';
import { get, set } from 'lodash-es';

// 或者使用 babel-plugin-lodash
import { get, set } from 'lodash';

25. 表单验证逻辑复杂

错误示例： 复杂的表单验证逻辑难以维护且容易出错。

解决方案： 使用成熟的表单验证库如 Vuelidate 或 FormKit 来简化验证逻辑。

// 使用 Vuelidate
import { useVuelidate } from '@vuelidate/core';
import { required, email } from '@vuelidate/validators';

export default {
  setup() {
    const v$ = useVuelidate();

    return {
      v$,
    };
  },
};

26. 国际化（i18n）配置错误

错误示例： 国际化配置不当，导致多语言切换功能失效。

解决方案： 确保正确配置 i18n 插件，并在组件中正确使用 $t 方法。

// 安装并配置 vue-i18n
import { createI18n } from 'vue-i18n';

const i18n = createI18n({
  locale: 'en',
  messages: {
    en: { message: { hello: 'hello world' } },
    zh: { message: { hello: '你好，世界' } },
  },
});

// 在组件中使用
<i18n>
  {{ $t('message.hello') }}
</i18n>

27. 懒加载组件时忘记处理错误

错误示例： 懒加载组件时没有处理加载失败的情况，导致用户体验不佳。

解决方案： 确保懒加载组件时有适当的错误处理机制。

const AsyncComponent = defineAsyncComponent({
  loader: () => import('./components/AsyncComponent.vue'),
  loadingComponent: LoadingComponent,
  errorComponent: ErrorComponent,
  delay: 200,
  timeout: 3000,
});

28. 跨域请求问题

错误示例： 跨域请求失败，导致 API 请求无法正常工作。

解决方案： 确保服务器端配置了正确的 CORS 头，并在客户端配置代理或使用浏览器插件。

javascript

 

// 在 Vite 中配置代理
export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
});

29. 单元测试覆盖率不足

错误示例： 单元测试覆盖不全，导致潜在问题未能及时发现。

解决方案： 使用 Jest 或 Vitest 进行单元测试，并确保测试覆盖率足够高。

# 使用 Jest
npm install --save-dev jest @vue/test-utils vue-jest

# 使用 Vitest
npm install --save-dev vitest @vue/test-utils

30. 构建和部署问题

错误示例： 构建和部署过程中出现问题，导致应用无法正常上线。

解决方案： 确保构建脚本正确配置，并使用 CI/CD 工具如 GitHub Actions 或 GitLab CI 自动化部署流程。

# GitHub Actions 示例
name: Deploy

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Install dependencies
        run: npm install
      - name: Build project
        run: npm run build
      - name: Deploy to server
        run: |
          scp -r dist/* user@your-server:/var/www/html/

3.0-完