Vue---vue3+vite项目内使用devtools,快速开发!

背景

我们在前期开发时,一般使用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 

最终效果如下:

相关推荐
Wetoria几秒前
管理 git 分支时,用 merge 还是 rebase?
前端·git
前端开发与ui设计的老司机11 分钟前
UI前端与数字孪生融合新领域:智慧环保的污染源监测与治理
前端·ui
一只小风华~24 分钟前
Web前端开发: :has功能性伪类选择器
前端·html·html5·web
成遇31 分钟前
Eslint基础使用
javascript·typescript·es6
Mr_Mao4 小时前
Naive Ultra:中后台 Naive UI 增强组件库
前端
前端小趴菜056 小时前
React-React.memo-props比较机制
前端·javascript·react.js
摸鱼仙人~7 小时前
styled-components:现代React样式解决方案
前端·react.js·前端框架
sasaraku.7 小时前
serviceWorker缓存资源
前端
RadiumAg9 小时前
记一道有趣的面试题
前端·javascript
yangzhi_emo9 小时前
ES6笔记2
开发语言·前端·javascript