Skip to content

hmr: 编辑 .vue 组件 template 后,再去编辑组件中导入的外部脚本时,外部脚本的 hmr 失效 #10422

@ghost

Description

Describe the bug

hmr: 编辑 .vue 组件 template 后,再去编辑组件中导入的外部脚本时,外部脚本的 hmr 失效

这是一个通过 npm 创建的 vite vue3 项目,纯净的,未导入任何插件。

修改 HellowWorld.vue 文件 template 后,修改 data.js 的 text 值,text 值不能热更新;

代码

HelloWorld.vue

<script setup lang="ts">
import { text } from './data';
</script>

<template>
  <h3>HelloWorld</h3>
  <h4>text: {{ text }}</h4>
</template>

data.ts

export const text: string = 'text'

Reproduction

https://stackblitz.com/edit/vitejs-vite-vhs1cm?file=vite-project%2Fsrc%2Fcomponents%2FHelloWorld.vue,vite-project%2Fsrc%2Fcomponents%2Fdata.ts&terminal=dev

Steps to reproduce

  1. npm run dev;
  2. compoents/data.ts: 修改 export const text: string = 'text' 为 export const text: string = 'text1'; // hmr 正常
  3. comonents/HelloWorld.vue: 修改 template, 列如 HelloWorld 改为 Hello; // hmr 正常运行
  4. compoents/data.ts: 修改 export const text: string = 'text1' 为 export const text: string = 'text2'; // 控制台打印 hmr updated,页面未更新
  5. 刷新页面,text 更新;
  6. 再次修改 data.ts 中 text 的值 // hmr 失效

如果 HelloWorld.vue 中更改的是 script 脚本,则 hmr 正常

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (16) x64 AMD Ryzen 7 5800H with Radeon Graphics
    Memory: 1.55 GB / 15.36 GB
  Binaries:
    Node: 14.19.0 - D:\program\nodejs\node.EXE
    Yarn: 1.22.19 - D:\program\nodejs_g\node_global\yarn.CMD
    npm: 6.14.16 - D:\program\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (106.0.1370.37)
    Internet Explorer: 11.0.19041.1566

Used Package Manager

npm

Logs

No response

Validations

Metadata

Metadata

Assignees

No one assigned

    Labels

    duplicateThis issue or pull request already exists

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions