详解文件 - packeg.json-Vite

package.json 是一个项目描述文件, 是一个严格的 json 文件，里面记录了当前项目的信息。比如: 项目名称、版本、作者、GitHub 地址、当前项目依赖哪些第三方模块等。

当我们需要向项目中添加额外的依赖时，其就会被记录到这个文件默认的模板工程中。

创建项目代码

1
npm create vite@latest my-vue-app -- --template vue
2
cd my-vue-app
3
npm install
4
npm run dev

若您是跟着代码一步步走来，packeg.json 里面的文件应该是这样的

1
{
2
  "name": "my-vue-app",
3
  "private": true,
4
  "version": "0.0.0",
5
  "type": "module",
6
  "scripts": {
7
    "dev": "vite",
8
    "build": "vite build",
9
    "preview": "vite preview"
10
  },
11
  "dependencies": {
12
    "vue": "^3.2.37"
13
  },
14
  "devDependencies": {
15
    "@vitejs/plugin-vue": "^3.1.0",
16
    "vite": "^3.1.0"
17
  }
18
}

介绍

dependencies - 生成环境依赖

devDependencies - 开发环境依赖

• dev 使用 HMR 启动本地 web 服务器进行开发
• build 生成项目，并输出到文件夹。/dist
• preview 启动一个本地 web 服务器，该服务器从/dist 为构建的解决方案提供预览服务

参考文章

• “vite”和“vite 预览”有什么区别？