前言

vite是一個web開發(fā)構(gòu)建工具，由于其原生ES模塊導(dǎo)入方式，可以實現(xiàn)閃電般的冷服務(wù)器啟動。相對于webpack可以更快創(chuàng)建項目。

注意：vite不支持IE11

vite簡介

vite主要由兩部分組成：

• 一個開發(fā)服務(wù)器，它利用原生ES模塊提供了豐富的內(nèi)建功能。
• 一套構(gòu)建指令，它使用Rollup打包代碼，預(yù)配置輸出高度優(yōu)化的靜態(tài)資源用于生產(chǎn)。

vite兩個子命令：

• serve：啟動一個用于開發(fā)的服務(wù)器
• build：構(gòu)建整個項目，也就是上線

利用vite創(chuàng)建vue3項目

首先我們需要用到npm進(jìn)行創(chuàng)建，如果npm的版本是6.x，則使用以下代碼：

npm init vite@latest <project-name> --template vue

如果npm的版本是7+，需要加上額外的雙短橫線，則使用以下代碼：

npm init vite@latest <project-name> -- --template vue

使用npm -v查看npm的版本，v也就是version，版本的意思。

進(jìn)入命令提示符，輸入npm -v，查看版本

小編的npm的版本是9.3.1，所以在終端輸入如下代碼：
npm init vite@latest vue-firstdemo -- --template vue
這里的vue-firstdemo是創(chuàng)建項目的名字噢~

我們的項目創(chuàng)建完成啦，接著根據(jù)提示， 輸入cd vue-firstdemo進(jìn)入創(chuàng)建的項目，輸入npm
install安裝依賴。

最后輸入npm run dev運行項目，我們可以發(fā)現(xiàn)，使用vite運行起來速度也是非?？斓?，在瀏覽器輸入local中的地址，就運行成功啦！

結(jié)構(gòu)目錄

以下是創(chuàng)建完成后的項目結(jié)構(gòu)目錄，node_modules文件夾是整個項目的依賴；public文件夾是靜態(tài)資源文件夾，用來存放靜態(tài)資源的；src文件夾是源代碼部分，編寫的代碼都是放在src中的噢；main.js是入口文件。

一個小BUG

在運行代碼后，服務(wù)器報了一個錯誤很有意思，和大家分享一下：

Unchecked runtime.lastError: The message port closed before a response was received.

這句話的意思是服務(wù)端無法在指定時間內(nèi)，給到客戶端的響應(yīng)。導(dǎo)致這個錯誤的原因是Chrome 瀏覽器的擴展程序在運行時報錯。具體的說，是在調(diào)用chrome.runtime.sendMessage() 或 chrome.runtime.sendNativeMessage() 時觸發(fā)這個報錯。也就是插件和程序不兼容導(dǎo)致的。

解決方法：

在 Chrome 瀏覽器中訪問 chrome://extensions/ 打開擴展程序界面，逐個關(guān)閉擴展以排查出問題所在。

總結(jié)

到此這篇關(guān)于利用vite創(chuàng)建vue3項目的全過程及一個小BUG詳解的文章就介紹到這了,更多相關(guān)vite創(chuàng)建vue3項目內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論