Vue---vue3+vite项目内使用devtools，快速开发！

绝世唐门三哥2024-07-27 20:27

背景

我们在前期开发时，一般使用chrome或者edge浏览器，会使用vue-devtools或react-devtools（此插件个人未使用，可百度下是否可内嵌入项目！）来审查vue项目；这个需要安转浏览器插件才可支持！

目前

近期在使用命令

javascript 复制代码

npm create vue@latest

创建vue3项目时，会提示是否安装devtools的插件！

故此本博客的目的是，如果已经开发或者维护阶段的vue+vite项目如何临时插入该插件使用!

使用步骤

1. 插件一般用于调试，所以无需安转到 dependencies

javascript 复制代码

npm i vite-plugin-vue-devtools -D

2. 导入到vite.config.js 或者 vite.config.ts配置中

javascript 复制代码

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

3. 重新启动下项目

javascript 复制代码

npm run dev

最终效果如下：