V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
GNightDearLamb
V2EX  ›  Vue.js

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

  •  
  •   GNightDearLamb · 270 天前 · 1944 次点击
    这是一个创建于 270 天前的主题,其中的信息可能已经有所发展或是发生改变。

    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 条附言  ·  265 天前

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

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

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

    第 2 条附言  ·  265 天前

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

    • 项目中用了naiveui
    • 在报错的组件中使用了form组件。
    • 组件中因为有两个小型表单不是必填的,所以不用加验证。所以我在代码中写了
    <n-form :model="data" ref="" :rules="rules"></n-form>
    
    • 就是因为上面的ref=" "报错了,去掉就好了。

    确实有点丢人了

    15 条回复    2022-02-28 13:29:45 +08:00
    wxsm
        1
    wxsm  
       270 天前   ❤️ 1
    这个报错信息并不是很明确。这种情况一般建议二分法:把代码删掉一半看还报不报错,如此往复,最后定位到真正出问题的地方。
    hitaoguo
        2
    hitaoguo  
       270 天前
    文件内容方便贴出来吗
    GNightDearLamb
        3
    GNightDearLamb  
    OP
       270 天前 via iPhone
    @hitaoguo 好 明天我精简一下发出来吧 谢谢
    GNightDearLamb
        4
    GNightDearLamb  
    OP
       270 天前 via iPhone
    @wxsm 哈哈哈哈哈哈明天去公司试一下
    nathanleeinph
        5
    nathanleeinph  
       270 天前
    file: xxxxxxxxxx/index.vue:321:13

    语法错误 看看是不是多了或者少了什么符号 编辑器应该有提示
    pengtdyd
        6
    pengtdyd  
       270 天前
    目前阶段不推荐在企业项目中使用 vite
    Huelse
        7
    Huelse  
       270 天前
    多半是语法错误,定位到奇怪的位置了
    HFX3389
        8
    HFX3389  
       270 天前
    @pengtdyd #6 是因为还不成熟吗?
    HFX3389
        9
    HFX3389  
       270 天前
    @GNightDearLamb #4 明天周六啊还去公司加班?
    codingBug
        10
    codingBug  
       270 天前 via Android   ❤️ 1
    这个提示是因为你使用了动态导入的语法,比如:

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

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

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

    vite 好像内置声明了一个字段用来承接插件选项,配置好之后,在这个目录下使用动态引入就不会出现打包问题了
    GNightDearLamb
        11
    GNightDearLamb  
    OP
       269 天前 via iPhone
    @HFX3389 我也刚发现今天周六哈哈哈哈哈哈 周一吧周一吧
    GNightDearLamb
        12
    GNightDearLamb  
    OP
       269 天前 via iPhone
    @codingBug 好的谢谢🙏
    GNightDearLamb
        13
    GNightDearLamb  
    OP
       269 天前 via iPhone
    @pengtdyd 当时头脑一热就看着文档写起来了
    shaoyuzijiang
        14
    shaoyuzijiang  
       171 天前 via Android
    @GNightDearLamb 楼主,第一个 vue 项目是什么,有推荐么?
    GNightDearLamb
        15
    GNightDearLamb  
    OP
       169 天前
    @shaoyuzijiang 第一个项目是用 VeCharts 做的一个小工具,可以自己编辑数据,编辑配置项和设置图表类型。在准备把配置写到数据库里存起来的时候找到工作了,就没继续坐下去了。
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   1193 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 22:06 · PVG 06:06 · LAX 15:06 · JFK 18:06
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.