纯小白用 vue3+vite 写项目打包遇到了问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

这是一个创建于 1435 天前的主题，其中的信息可能已经有所发展或是发生改变。

用vite build打包时出出现了报错，因为我也不不是很会前端所以想问下有没有大牛指点一下

报错如下:

[rollup-plugin-dynamic-import-variables] Unexpected token (321:13) file: xxxxxxxxxx/index.vue:321:13 error during build: SyntaxError: Unexpected token (321:13) at Parser.pp$4.raise (xxxxxxxxxx\node_modules\rollup\dist\shared\rollup.js:16958:13) at Parser.pp.unexpected (xxxxxxxxxx\node_modules\rollup\dist\shared\rollup.js:14466:8) at Parser.pp$3.parseExprAtom (xxxxxxxxxx\node_modules\rollup\dist\shared\rollup.js:16335:10) at Parser.pp$3.parseExprSubscripts (xxxxxxxxxx\node_modules\rollup\dist\shared\rollup.js:16130:19) at Parser.pp$3.parseMaybeUnary (xxxxxxxxxx\node_modules\rollup\dist\shared\rollup.js:16096:17) at Parser.pp$3.parseExprOps (xxxxxxxxxx\node_modules\rollup\dist\shared\rollup.js:16029:19) at Parser.pp$3.parseMaybeConditional (xxxxxxxxxx\node_modules\rollup\dist\shared\rollup.js:16012:19) at Parser.pp$3.parseMaybeAssign (xxxxxxxxxx\node_modules\rollup\dist\shared\rollup.js:15980:19) at Parser.pp$3.parsePropertyValue (xxxxxxxxxx\node_modules\rollup\dist\shared\rollup.js:16639:87) at Parser.pp$3.parseProperty (xxxxxxxxxx\node_modules\rollup\dist\shared\rollup.js:16630:8)

去看了下这个文件，是一个样式比较复杂的页面，321：13 是 css 的某一行。

也去搜了一下发现也有人遇到过这个问题但是最后还是没搞明白是怎么解决。

第 1 条附言 2021-11-24 19:03:57 +08:00

看到有人收藏了这个帖子，来汇报一下进度。

把报错的文件注释掉之后出现了新的文件报错，报错信息是一样的。
发现之前为了偷懒，直接把一段代码复制过去用了。
两个文件全部注释掉之后打包成功了。

所以基本确定了问题出现的地方，明天下午会找到问题然后解决掉的。

第 2 条附言 2021-11-24 20:06:56 +08:00

完事了，有时间会找一下出现这个问题的原因，现在确实水平不够不能理解。

项目中用了naiveui。
在报错的组件中使用了form组件。
组件中因为有两个小型表单不是必填的，所以不用加验证。所以我在代码中写了

<n-form :model="data" ref="" :rules="rules"></n-form>

就是因为上面的ref=" "报错了，去掉就好了。

确实有点丢人了

15 条回复 2022-02-28 13:29:45 +08:00

wxsm

2021-11-19 22:02:16 +08:00

这个报错信息并不是很明确。这种情况一般建议二分法：把代码删掉一半看还报不报错，如此往复，最后定位到真正出问题的地方。

hitaoguo

2021-11-19 22:10:25 +08:00

文件内容方便贴出来吗

GNightDearLamb

2021-11-19 22:19:51 +08:00 via iPhone

@hitaoguo 好明天我精简一下发出来吧谢谢

GNightDearLamb

2021-11-19 22:20:05 +08:00 via iPhone

@wxsm 哈哈哈哈哈哈明天去公司试一下

nathanleeinph

2021-11-19 22:53:01 +08:00

file: xxxxxxxxxx/index.vue:321:13

语法错误看看是不是多了或者少了什么符号编辑器应该有提示

pengtdyd

2021-11-19 23:27:56 +08:00

目前阶段不推荐在企业项目中使用 vite

Huelse

2021-11-19 23:43:57 +08:00

多半是语法错误，定位到奇怪的位置了

HFX3389

2021-11-20 01:14:58 +08:00

@pengtdyd #6 是因为还不成熟吗？

HFX3389

2021-11-20 01:17:56 +08:00

@GNightDearLamb #4 明天周六啊还去公司加班？

codingBug

2021-11-20 01:33:30 +08:00 via Android

这个提示是因为你使用了动态导入的语法，比如:

`const { demo } = await import(MODULE)`

解决方案是将源码目录添加到插件的配置选项中，比如:

```
{
include: ["src/**"]
}
```

vite 好像内置声明了一个字段用来承接插件选项，配置好之后，在这个目录下使用动态引入就不会出现打包问题了

GNightDearLamb

2021-11-20 09:05:30 +08:00 via iPhone

@HFX3389 我也刚发现今天周六哈哈哈哈哈哈周一吧周一吧

GNightDearLamb

2021-11-20 09:06:05 +08:00 via iPhone

@codingBug 好的谢谢

GNightDearLamb

2021-11-20 09:06:36 +08:00 via iPhone

@pengtdyd 当时头脑一热就看着文档写起来了

shaoyuzijiang

2022-02-26 11:34:54 +08:00 via Android

@GNightDearLamb 楼主，第一个 vue 项目是什么，有推荐么？

GNightDearLamb

2022-02-28 13:29:45 +08:00

@shaoyuzijiang 第一个项目是用 VeCharts 做的一个小工具，可以自己编辑数据，编辑配置项和设置图表类型。在准备把配置写到数据库里存起来的时候找到工作了，就没继续坐下去了。