前言

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

注意：vite不支持IE11

vite簡(jiǎn)介

vite主要由兩部分組成：

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

vite兩個(gè)子命令：

• serve：?jiǎn)?dòng)一個(gè)用于開發(fā)的服務(wù)器
• build：構(gòu)建整個(gè)項(xiàng)目，也就是上線

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

首先我們需要用到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)建項(xiàng)目的名字噢~

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

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

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

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

一個(gè)小BUG

在運(yùn)行代碼后，服務(wù)器報(bào)了一個(gè)錯(cuò)誤很有意思，和大家分享一下：

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

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

解決方法：

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

總結(jié)

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

最新評(píng)論