詳解文件 – packeg.json-Vite

package.json是一個項目描述文件, 是一個嚴格的json文件，里面記錄了當前項目的信息。比如: 項目名稱、版本、作者、gitHub地址、當前項目依賴哪些第三方模塊等。

當我們需要向項目中添加額外的依賴時，其就會被記錄到這個文件默認的模板工程中。

創建項目代碼

npm create vite@latest my-vue-app -- --template vue
cd my-vue-app
npm install
npm run dev

若您是跟著代碼一步步走來，packeg.json里面的文件應該是這樣的

{
  "name": "my-vue-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.37"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^3.1.0",
    "vite": "^3.1.0"
  }
}

介紹

dependencies – 生成環境依賴

devDependencies – 開發環境依賴

• dev 使用HMR啟動本地web服務器進行開發
• build 生成項目，并輸出到文件夾。/dist
• preview 啟動一個本地web服務器，該服務器從/dist為構建的解決方案提供預覽服務

參考文章

• “vite”和“vite預覽”有什么區別？