小魚兒心語：這個世界上最治愈的，不是任何其他的力量，而是越來越好的自己~~///(^v^)\~~??
基于vite構(gòu)建vue3項目其實很簡單，萬事開頭難嘛，最初遇到了各種報錯，很讓人頭疼，想盡了一切辦法，各種百度各種方法嘗試解決，最終功夫不負有心人吧，終于搭建完成，接下來，就把我遇到的坑分享給大家，避免再次入坑！
以下都是我遇到的報錯問題，大家避免入坑哦：
坑1.png
坑2.png
坑3.png
以上箭頭指向的都是錯誤的命令，并且文件夾層級也是錯誤的，請大家注意避免~
進入主題之前我們先來了解一下webpack與vite的區(qū)別，為什么要使用vite構(gòu)建vue項目呢？
- vite 官網(wǎng) ：https://cn.vitejs.dev/
vite 有什么優(yōu)勢呢？- 開發(fā)環(huán)境中，無需打包操作，快速的冷啟動
- 熱重載（HMR） 更輕量，快 （局部刷新）
- 按需編譯，不用再等待整個應(yīng)用的編譯
1、傳統(tǒng)的構(gòu)建相信用過 webpack 都知道，他是通過入口文件然后分析路由，再去分析模塊，都分析完了進行打包，然后告訴你服務(wù)器準(zhǔn)備好了
webpack.png
2、vite 構(gòu)建的工作模式，一上來就給用戶準(zhǔn)備好服務(wù)器，然后等待用戶請求，假如你發(fā)起了一個請求，然后 vite 會根據(jù)你的路徑 進入 入口文件然后找到 你的路由，分析該路由的模塊，然后給你 （動態(tài)的引入和代碼分割）
vite.png
接下來我們一起走向的光明大道：
一、創(chuàng)建vite
- 這里需要注意的是，必須在
E:\vue3.0\vue3ts_components\node_modules\.bin路徑下執(zhí)行命令（不清楚的小伙伴可以看看我的上一篇文章：http://www.itdecent.cn/p/a06c4425b635），否則會報錯！
npm create vite
創(chuàng)建vite.png
安裝好vite之后，原先的
node_modules文件夾下會生成一個@vitejs文件夾
@vitejs.png
二、創(chuàng)建基于vite的vue3項目
想要繼續(xù)執(zhí)行一下命令就需要進入這個路徑下操作：
.bin.png
bin.png
create-vite vitevue3 (項目名稱可以隨意更改)
vitevue3創(chuàng)建.png
一定要選擇vue，繼續(xù)：
js.png
目前我們先不使用
ts開發(fā),一步步來：
cd.png
三、啟動項目
安裝依賴成功后，啟動項目
啟動項目.png
此時，頁面已經(jīng)可以打開了，是這樣子的：
頁面.png
但是，大家可以看到，此時啟動之后，顯示“Network: use --host to expose”，無法訪問，別著急，一下是解決方法：
產(chǎn)生原因：“Network: use --host to expose”提示使用host來進行暴露，即要將服務(wù)暴露成IP+端口號進行訪問。
1、將package.json中的啟動項中的dev和serve增加--host參數(shù)。
原代碼：
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
修改后代碼：
"scripts": {
"dev": "vite --host",
"build": "vite build",
"preview": "vite preview --host"
},
2、在vite.config.ts文件中增加server選項配置，server中配置host內(nèi)容
原代碼：
export default defineConfig({
plugins: [vue()],
server: {
hmr: true,
open: true, // 是否自動在瀏覽器打開
}
})
修改后代碼：
export default defineConfig({
plugins: [vue()],
server: {
hmr: true,
host:'0.0.0.0', //此處為新增代碼
open: true, // 是否自動在瀏覽器打開
}
})
再次啟動后，會將本機的IP和端口號暴露出來，點擊可訪問.
VITE v4.1.4 ready in 426 ms
? Local: http://localhost:5175/
? Network: http://192.168.0.108:5175/
? press h to show help
