使用 Vue CLI 项目触发页面重新加载对导入的 JS 文件的更改

Question

当我更改 ./src/fn 下的任何功能 .js 文件时，热重载不起作用并触发页面重载。

我一直在尝试配置 vue.config.js 以将目录正确包含到 HMR。我还尝试将我的自定义助手用作 Vue.use(myPlugin).

/* functions.js (just a part of it) */
export const Functions = {
  game: {
    helper: helpers,
    turn: turn,
    ui: ui,
    validate: validate,
    card: cards
  },
}

/* main.js */
import Functions from './functions.js';
Vue.prototype.$myFn = Functions;

预期 HMR 可以工作，但在对 functions.js（或 functions.js 中导入的任何基础 js 文件）进行更改时会重新加载整个页面

Answer 1

将自己的对象和函数添加到 Vue 原型中有点 anti-pattern。在这种情况下，Webpack 无法确定所做更改的范围，因此它会回退到页面重新加载。这是因为 ES 模块可以静态分析，而全局对象不能。

这里有一些关于静态分析的文章：

从 Vue 原型中删除函数并始终使用 ES modules 来构建函数。然后，您可以 import 将它们添加到其他模块或组件中，而无需使用过去的遗留样式全局 hack 方法。

使用 Vue CLI 项目触发页面重新加载对导入的 JS 文件的更改

Changes on imported JS files with Vue CLI project trigger page reload

vue.js

webpack

vue-cli-3

webpack-hmr