Question

嗨，我是webapck和vue的新手，我正在尝试重新加载热模块，以便我的页面随着更改而更新。目前，当我按f5键即可浏览页面。

我正在使用一个asp.net核心站点，该站点通过IIS运行该站点，如果有区别的话。

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

https://stackoverflow.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才能将Webpack与Aspnet结合使用。

第二，在您的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，则应该会有所帮助。我无法从IIS运行HMR，但是如果您运行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",
    }
 }

当然，代理的值将是启动IIS时出现的URL。因此，现在，如果您启动IIS，然后在客户端应用程序中的终端中运行npm run，则您的客户端应用程序现在将能够代理到您的后端的呼叫，并且可以启动HMR。对于大多数人来说，这可以很好地工作，但是我遇到的一个问题是，从两端抛出错误，并且没有以这种方式设置cookie以及其他一些问题。问题全都围绕着您的IIS在HTTPS上运行以及您的webpack开发服务器在HTTP上运行。所以我解决这个问题的方法是像这样向我的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中。然后转到顶部的Google设置以搜索证书。隐私和安全性应弹出，然后单击更多。然后单击管理证书，然后单击受信任的根证书颁发机构，并将该Localhost.cer文件导入那里。这样可以消除弹出的错误。

HMR无法与vue和asp.net核心一起使用

2 个答案: