Vite建立的預設Vue3專案中package.json檔案資訊如下：
{
"name": "vmoudle1",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"vue": "^3.4.19"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.0.4",
"vite": "^5.1.4"
}
}
其中，存在npm 指令碼
"scripts": {
"dev": "vite", // 啟動開發伺服器
"build": "vite build", // 為生產環境構建產物
"preview": "vite preview" // 本地預覽生產構建產物
}
控制檯執行npm指令碼，啟動專案。
npm run dev
頁面如下。(為便於理解，我修改了專案)
檢視index.html檔案
<!doctype html>
<html lang="en">
<!--刪除head標籤中的內容-->
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
這麼點東西怎麼能夠顯示上圖頁面呢？
解析：(附帶專案結構)
