HMR 不适用于 vue 和 asp.net 核心

Question

您好，我是 webapck 和 vue 的新手，我正在尝试让热模块重新加载工作，以便我的页面随着更改而更新。目前，当我 ctrl f5 页面时它可以工作。

我正在使用一个通过 IIS 运行该站点的 asp.net 核心站点，如果这会有所不同的话。

我使用这个答案来启动并运行 vue：

https://*.com/a/49428220/66975

这是我的 webpack.config.js：

    const { VueLoaderPlugin } = require('./node_modules/vue-loader')
module.exports = {
    entry: './Vue/index.js',
    output: {
        path: __dirname,
        filename: './wwwroot/js/bundle.js'//'./Vue/dist/bundle.js'
    },
    watch: true,
    plugins: [
        new VueLoaderPlugin()
    ],
    devtool: 'source-map',
    module: {
        rules: [
            {
                test: /\.vue$/,
                exclude: /node_modules/,
                loader: 'vue-loader'
            }
        ]
    }
};

包json：

{
  "name": "WebApplication13",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "vue-loader": "^15.2.4",
    "vue-template-compiler": "^2.5.16",
    "webpack": "^4.12.0"
  },
  "dependencies": {
    "vue": "^2.5.16"
  }
}

Answer 1

我知道有点晚了，但是使用 Asp.net Core 项目设置 HMR 相对容易。

首先在您的package.json 中，您只需添加这两个包。

"aspnet-webpack": "^3.0.0", 
"webpack-dev-middleware": "^3.1.3"

Aspnet-webpack，需要添加才能与Aspnet结合使用webpack。

其次，在您的 asp.net 核心项目中，您必须使用 Nuget 包 Microsoft.AspNetCore.SpaServices（在 Asp.net Core 2.1 中，这似乎默认包含在 Microsoft.AspNetCore.All 包中）

最后，简单地将以下内容添加到 Configure 方法中的 Startup.cs（或等效项）中。

if (env.IsDevelopment())
{    
    app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
    {
        HotModuleReplacement = true
    });
}

（我们只想在开发时启用 HMR）

还要链接this，更具体的这部分：

如果您想将 UseWebpackDevMiddleware 助手与 HotModuleReplacement 一起使用，则不要在您的 Webpack 配置中添加任何有关 HMR 的内容，因为助手代码会动态添加它。例如，不要将webpack.HotModuleReplacementPlugin() 放在您的配置中。

希望这会有所帮助！

Answer 2

如果您将 Vue 用于前端，而将 .Net Core 3.1 用于后端，这应该会对您有所帮助。我无法让 HMR 从 IIS 工作，但如果您运行 IIS 来启动后端，然后仅在不同的端口上运行 Vue 部分，您可以代理对后端的所有调用，并让应用程序通过 HMR 完全正常运行.所以在 startup.cs 你要添加

    app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllerRoute(
                    name: "default",
                    pattern: "{controller}/{action=Index}/{id?}");

                if (env.IsDevelopment())
                {
                    endpoints.MapToVueCliProxy(
                        "{*path}",
                        new SpaOptions { SourcePath = "ClientApp" },
                        npmScript: "serve",
                        port: 8000,
                        regex: "Compiled successfully");
                }

                // Add MapRazorPages if the app uses Razor Pages. Since Endpoint Routing includes support for many frameworks, adding Razor Pages is now opt -in.
                endpoints.MapRazorPages();
            });


            app.UseSpa(spa =>
            {
                    spa.Options.SourcePath = "ClientApp";
            });

并将这些包也包含在顶部

  using Microsoft.AspNetCore.SpaServices;
using VueCliMiddleware;
using Microsoft.AspNetCore.SpaServices.Webpack;

然后在你的 ClientApp 文件夹的根目录下创建一个 vue.config.js 并放在那里

  module.exports = {
    devServer: {
        proxy: "https://localhost:44354",
        host: "localhost",
    }
 }

当然，proxy 的值将是您启动 IIS 时出现的 URL。 因此，现在如果您启动 IIS，然后在客户端应用程序的终端中运行 npm run serve，您的客户端应用程序现在将能够代理对后端的调用，并且您将启动并运行 HMR。对于大多数人来说，这可以正常工作，但我遇到的一个问题是从每一端抛出的错误和没有以这种方式设置 cookie 以及其他一些问题。问题都围绕着在 HTTPS 上运行的 IIS 和在 HTTP 上运行的 webpack 开发服务器。所以我解决这个问题的方法是像这样向我的 package.json 添加另一个脚本

"dev": "vue-cli-service serve --https --port 8082"

所以现在当您启动 IIS 时，它将运行 npm run serve 命令，该命令将不提供 https，这正是您想要的。然后从您的 ClientApp 文件夹运行 npm run dev ，它将在您的前端为您提供 HTTPS。但是现在还有一个问题，当您从前端 chrome 打开 localhost 时会抛出一个错误，说这个站点不安全，然后您必须单击高级并选择继续。所以仍然会抛出错误并且不会设置cookie。我所做的是进入 VS 代码并创建了一个名为 Localhost.cer 的新文件。然后在左上角的浏览器中抛出关于不安全的错误（它是红色的）单击它，然后转到详细信息。然后我认为它的保存文件或导入文件或类似的点击然后证书向导应该弹出并且您想要将该文件作为一个整体保存到您之前创建的 Localhost.cer 中。然后转到顶部搜索证书的谷歌设置。隐私和安全应该弹出然后点击更多。然后单击管理证书，然后单击受信任的根证书颁发机构并在那里导入该 Localhost.cer 文件。这样就可以摆脱弹出的错误了。