An overview of
Upgrade the scaffolding, refer to the new version, and the code that worked well before will always report errors. The problem came when I took out the scaffolding I had built using WebPack4 + VUe2 and upgraded it. Previously vUE packaging was introduced using DLLS to improve compilation speed and reduce packaging volume. When I upgraded vue2 to VUe3, the project took off. Page whiteboard, open the console found error output:
Cause analysis,
VUE_HMR_RUNTIME is related to module hot replacement. Vue-loader is also upgraded when vue2 is upgraded to vue3. Vue-loader supports module hot replacement, but the code packaged by DLL is no longer supported, so this variable cannot be found
The solution
- Weighing the pros and cons, it is more important to see whether module hot replacement is important or DLL to improve the compilation speed. Personally, I prefer hot module replacement, which can effectively improve the development efficiency.
- Configure vue-loader to disable hot replace
{ test: /\.vue/, exclude: /node_modules/, include: path.resolve(__dirname, ".. /src"), use: [ { loader: "vue-loader", options: { hotReload: true } }, ], },Copy the code