如何在Visual Studio中为Vue + webpack + asp.net核心启用js热重加载？

问题描述

许多小时后，我设法在Visual Studio中设置了最少（希望如此）的Vue + Webpack + ASP.NET Core / Razor应用程序，并且我使单个文件Vue组件正常工作（如果有人想尝试-这是GitHub存储库：{{ 3}}）。

如何启用JS / Vue内容的热重加载？

我想尽可能保留Visual Studio Razor Pages调试功能。

我以前从未使用过webpack，并且我对这个生态系统不熟悉。

这是我的package.json：

{
  "name": "razorvue","version": "1.0.0","description": "","main": "site.js","scripts": {
    "build": "webpack"
  },"repository": {
    "type": "git","url": "razorvue"
  },"author": "","license": "","dependencies": {
    "vue": "^2.6.12"
  },"devDependencies": {
    "babel-core": "^6.26.3","babel-loader": "^7.1.5","babel-polyfill": "^6.26.0","babel-preset-env": "^1.7.0","vue-loader": "^15.9.4","vue-template-compiler": "^2.6.12","webpack": "^5.3.0","webpack-cli": "^4.1.0"
  }
}

这是我的webpack.config.js

const path = require('path');

const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
    entry: ['./src/js/main.js'],output: {
        path: path.resolve(__dirname,'./wwwroot/js'),filename: 'bundle.js'
    },// IMPORTANT NOTE: If you are using Webpack 2 or above,replace "loaders" with "rules"
    module: {
        rules: [{
            loader: 'babel-loader',test: /\.js$/,exclude: /node_modules/
        },{
                test: /\.vue$/,loader: 'vue-loader'
            }
        ]
    },plugins: [
        // make sure to include the plugin!
        new VueLoaderPlugin()
    ]
}

在开始调试（或构建解决方案）之前，我已将“构建前事件命令行设置为运行npm run build：

link

我的项目结构如下：

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）