vue3项目打包错误

错误1 包冲突

解决方法两种：
（1）在安装包的时候忽略冲突，安装命令后面加 --force or --legacy-peer-deps 例如：

npm install vue-router@next -S --legacy-peer-deps

（2）更新所有的包到，最新，再来解决冲突
npm install -g npm-check-updates // 安装
ncu -u // 检测
npm install // 更新

2

vite v2.9.13 building for production...
✓ 9 modules transformed.
[vite:resolve] Missing "./preload-helper" export in "vite" package
error during build:
Error: Missing "./preload-helper" export in "vite" package
    at bail (C:\Users\wumeng\AppData\Roaming\npm\node_modules\vite\dist\node\chunks\dep-80fe9c6b.js:38572:8)
    at resolve (C:\Users\wumeng\AppData\Roaming\npm\node_modules\vite\dist\node\chunks\dep-80fe9c6b.js:38649:10)
    at resolveExports (C:\Users\wumeng\AppData\Roaming\npm\node_modules\vite\dist\node\chunks\dep-80fe9c6b.js:40957:12)
    at resolveDeepImport (C:\Users\wumeng\AppData\Roaming\npm\node_modules\vite\dist\node\chunks\dep-80fe9c6b.js:40975:31)
    at tryNodeResolve (C:\Users\wumeng\AppData\Roaming\npm\node_modules\vite\dist\node\chunks\dep-80fe9c6b.js:40748:20)
    at Object.resolveId (C:\Users\wumeng\AppData\Roaming\npm\node_modules\vite\dist\node\chunks\dep-80fe9c6b.js:40556:28)
    at C:\Users\wumeng\AppData\Roaming\npm\node_modules\vite\node_modules\rollup\dist\shared\rollup.js:22870:37

第一个报错js，右键点进去，搜索 vite/preload-helper 替换为 \0vite/preload-helper 如图

3 terser not found. Since Vite v3, terser has become an optional dependency. You need to install it.

terser not found. Since Vite v3, terser has become an optional dependency. You need to install it.

npm i  terser --legacy-peer-deps 

安装这个包

4 vite3报错

TypeError: Cannot destructure property 'renderBuiltUrl' of 'config.experimental' as it is undefined.
    at toOutputFilePathInHtml (E:\BaiduSyncdisk\PHPproject\JavaScript\mksz542\node_modules\@vitejs\plugin-legacy\dist\index.cjs:25:11)
    at toAssetPathFromHtml (E:\BaiduSyncdisk\PHPproject\JavaScript\mksz542\node_modules\@vitejs\plugin-legacy\dist\index.cjs:62:10)
    at transformIndexHtml (E:\BaiduSyncdisk\PHPproject\JavaScript\mksz542\node_modules\@vitejs\plugin-legacy\dist\index.cjs:343:18)
    at applyHtmlTransforms (C:\Users\wumeng\AppData\Roaming\npm\node_modules\vite\dist\node\chunks\dep-80fe9c6b.js:36977:27)
    at Object.generateBundle (C:\Users\wumeng\AppData\Roaming\npm\node_modules\vite\dist\node\chunks\dep-80fe9c6b.js:36928:32)
    at C:\Users\wumeng\AppData\Roaming\npm\node_modules\vite\node_modules\rollup\dist\shared\rollup.js:22870:37

这个错误似乎是 plugin-legacy 2.0需要 vite 3.0才行

但是我是这样的也报错

这里的解决办法目前只能关闭兼容性

// 3.兼容处理
// import legacy from '@vitejs/plugin-legacy'

 // 兼容性设置
    // legacy({
    //   targets: ['defaults', 'not IE 11']
    // }),

5 node的中使用import引入模块导致错误

import fs from 'node:fs'
import path from 'node:path'
import { fileURLToPath } from 'node:url'

如下错误：

import fs from 'node:fs'
^^^^^^

SyntaxError: Cannot use import statement outside a module

解决方法：
package中添加type:module

"type": "module",
  "scripts": {
    "preview": "vite preview --port 4173",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
    "dev": "node server",
    "build": "npm run build:client && npm run build:server",
    "build:noExternal": "npm run build:client && npm run build:server:noExternal",
    "build:client": "vite build --ssrManifest --outDir dist/client",
    "build:server": "vite build --ssr src/entry-server.js --outDir dist/server",
    "build:server:noExternal": "vite build --config vite.config.noexternal.js --ssr src/entry-server.js --outDir dist/server",
    "generate": "vite build --ssrManifest --outDir dist/static && npm run build:server && node prerender",
    "serve": "cross-env NODE_ENV=production node server",
    "debug": "node --inspect-brk server",
    "start": "node server.js"
  },