Vue項目啟動后如何在瀏覽器自動打開
Vue項目啟動后在瀏覽器自動打開
想要實現(xiàn) Vue 項目在瀏覽器自動打開,只需要幾步簡單的操作就可以實現(xiàn)了。
我這里是使用了Vue3.x的腳手架創(chuàng)建的項目,項目的目錄架構你們有可能是和你們的不太一樣,但是道理是這樣子的道理。
其他話不多說,直接上步驟安排。
1.找到Vue項目的package.json文件
"scripts": { "serve": "vue-cli-service serve --open", "build": "vue-cli-service build", "lint": "vue-cli-service lint" },
在 scripts 代碼塊的 server 的后面加上 --open ,然后重新啟動項目。
做到這里的時候其實有些人的項目是可以直接在瀏覽器啟動的,但是我的不可以的,會遇到無法訪問網(wǎng)站的問題。
后來我又找了一下,是還需要配置第二步的 。
2.找到vue.config.js文件
沒有這個文件的話要自己創(chuàng)建一個,然后在里面加上如下的代碼段
const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ transpileDependencies: true, devServer:{ //用于開發(fā)環(huán)境 host: 'localhost', port: 8080, } })
然后重新啟動項目,就可以在瀏覽器自動打開了。兄弟們,是不是挺簡單的。
總結
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
Vue3使用transition組件改變DOM屬性的方式小結
這篇文章主要為大家詳細介紹了Vue3中使用transition組件改變DOM屬性的常用方式,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-01-01詳解為element-ui的Select和Cascader添加彈層底部操作按鈕
這篇文章主要介紹了詳解為element-ui的Select和Cascader添加彈層底部操作按鈕,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-02-02vue中使用echarts刷新可以正常渲染但路由跳轉不顯示的問題解決
在?Vue?中使用?ECharts?組件時,遇到路由跳轉后圖表不顯示的問題可能是因為組件銷毀和重新創(chuàng)建的原因,所以本文給大家介紹了vue中使用echarts刷新可以正常渲染但路由跳轉不顯示問題的解決方法,需要的朋友可以參考下2024-02-02Vue3 openlayers加載瓦片地圖并手動標記坐標點功能
這篇文章主要介紹了 Vue3 openlayers加載瓦片地圖并手動標記坐標點功能,我們這里用vue/cli創(chuàng)建,我用的node版本是18.12.1,本文結合示例代碼給大家介紹的非常詳細,需要的朋友可以參考下2024-04-04