Vue项目如何打包失败(图解)

news2024/12/28 6:21:51

案例分析

打包失败

package.json

修正文件

打包测试

打包成功

案例分析

打包失败

package.json

{
  "name": "diaryui",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@element-plus/icons-vue": "^2.3.1",
    "axios": "^1.7.2",
    "date-fns": "^3.6.0",
    "dayjs": "^1.11.12",
    "element-plus": "^2.7.8",
    "vue": "^3.4.29",
    "vue-router": "^4.4.0"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.5",
    "vite": "^5.3.1"
  }
}

没有定义名为 "build:prod" 的脚本。这就是为什么运行 npm run build:prod 时会报错，因为 npm 在 scripts 部分找不到这个脚本。

在 scripts 中添加

"build:prod": "vite build --mode prod"

修正文件

{
  "name": "diaryui",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "build:prod": "vite build --mode prod" // 添加在这里
  },
  "dependencies": {
    "@element-plus/icons-vue": "^2.3.1",
    "axios": "^1.7.2",
    "date-fns": "^3.6.0",
    "dayjs": "^1.11.12",
    "element-plus": "^2.7.8",
    "vue": "^3.4.29",
    "vue-router": "^4.4.0"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.5",
    "vite": "^5.3.1"
  }
}