背景
我们在前期开发时,一般使用chrome或者edge浏览器,会使用vue-devtools或react-devtools(此插件个人未使用,可百度下是否可内嵌入项目!)来审查vue项目;这个需要安转浏览器插件才可支持!
目前
近期在使用命令
npm create vue@latest
创建vue3项目时,会提示是否安装devtools的插件!
故此本博客的目的是,如果已经开发或者维护阶段的vue+vite项目如何临时插入该插件使用!
使用步骤
1. 插件一般用于调试,所以无需安转到dependencies
npm i vite-plugin-vue-devtools -D
2. 导入到vite.config.js 或者 vite.config.ts配置中
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. 重新启动下项目
npm run dev
最终效果如下:
本站资源均来自互联网,仅供研究学习,禁止违法使用和商用,产生法律纠纷本站概不负责!如果侵犯了您的权益请与我们联系!
转载请注明出处: 免费源码网-免费的源码资源网站 » Vue---vue3+vite项目内使用devtools,快速开发!
发表评论 取消回复