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

[GNightDearLamb]

用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 的某一行。

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

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

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

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

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

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

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

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

确实有点丢人了

[wxsm]

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

[hitaoguo]

文件内容方便贴出来吗

[GNightDearLamb]

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

[GNightDearLamb]

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

[nathanleeinph]

file: xxxxxxxxxx/index.vue:321:13

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

[pengtdyd]

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

[Huelse]

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

[HFX3389]

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

[HFX3389]

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

[codingBug]

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

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

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

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

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

[GNightDearLamb]

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

[GNightDearLamb]

@codingBug 好的谢谢🙏

[GNightDearLamb]

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

[shaoyuzijiang]

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

[GNightDearLamb]

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