vite脚手架项目启动时自动打开浏览器

373 阅读1分钟

今天尚硅谷老师讲了一个很好用的vite配置,就是我们启动vue3项目的时候,控制台给我们输出的是项目的本地url地址,像这样: image.png 我们需要打开浏览器输入url地址,才能打开我们项目的页面。
我们可以按住CTRL键,双击这个url,可以打开项目对应的浏览器页面。
还有一个更方便的做发,就是让vite自动打开项目的页面:

我们需要在package.json中这样配置:

{
 "name": "vue-practice",
 "version": "0.0.0",
 "private": true,
 "type": "module",
 "scripts": {
   "dev": "vite --open",  //让vite自动打开浏览器对应的页面
   "build": "vite build",
   "preview": "vite preview"
 },
 "dependencies": {
   "mitt": "^3.0.1",
   "pinia": "^2.2.4",
   "pinia-plugin-persistedstate": "^4.1.2",
   "vue": "^3.5.12",
   "vue-router": "^4.4.5",
   "vuetify": "^3.7.3"
 },
 "devDependencies": {
   "@vitejs/plugin-vue": "^5.1.4",
   "vite": "^5.4.10",
   "vite-plugin-vuetify": "^2.0.4"
 }
}

原先是这里这样的:"dev": "vite"
要改成这样:"dev": "vite --open"