使用 Vue.js 和 .NET MVC 的 WebPack 热重载答案

【问题标题】：WebPack hot reload with Vue.js and .NET MVC使用 Vue.js 和 .NET MVC 的 WebPack 热重载
【发布时间】：2018-11-18 00:22:50
【问题描述】：

我正在尝试将 Vue.js（我也是新手）与现有的 .NET MVC 项目集成。这样我就可以在我认为合适的应用程序的某些区域尝试使用 Vue。

为此，我遵循了一些指南：

到目前为止，似乎一切都很好，但我注意到热重载不起作用。当我运行 webpack 服务器时，我可以看到它正在检测更改并重新编译文件，但浏览器中没有任何反应。事实上，即使我手动刷新或硬刷新页面，也没有任何反应。如果我停止应用程序然后再次运行它，它才会更新。

这是我目前的简单设置...

我有一个新的 MVC 区域，其中有一个视图，具有以下文件夹结构：

WebpackTest/Views/index.html：

<div id="app">
  <h3>@ViewBag.Message</h3>
  {{ vueMessage }}
</div>

@section Scripts {
  <script src="~/bundle/webpacktest.js"></script>
}

然后我有一个包含我的 Vue 代码的脚本文件夹：

scripts/webpacktest/main.js

import Vue from 'vue'

new Vue({
  el: '#app',
  data() {
    return {
      vueMessage: 'Message from Vue'
    }
  }
})

这是我的 package.json：

{
  "name": "test",
  "description": "test",
  "version": "1.0.0",
  "author": "Andy Furniss",
  "license": "MIT",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "eslint": "^5.9.0",
    "vue": "^2.5.11"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "babel-preset-stage-3": "^6.24.1",
    "cross-env": "^5.0.5",
    "css-loader": "^0.28.7",
    "file-loader": "^1.1.4",
    "node-sass": "^4.5.3",
    "sass-loader": "^6.0.6",
    "vue-loader": "^13.0.5",
    "vue-template-compiler": "^2.4.4",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1",
    "eslint-plugin-vue": "^4.7.1"
  }
}

...还有我的 webpack.config.js：

var path = require('path')
var webpack = require('webpack')

var fs = require('fs')
var appBasePath = './Scripts/app/'
var jsEntries = {}
// We search for index.js files inside basePath folder and make those as entries
fs.readdirSync(appBasePath).forEach(function (name) {
  var indexFile = appBasePath + name + '/main.js'
  if (fs.existsSync(indexFile)) {
    jsEntries[name] = indexFile
  }
})

module.exports = {
  entry: jsEntries,
  output: {
    path: path.resolve(__dirname, './wwwroot/bundle/'),
    publicPath: '/wwwroot/bundle/',
    filename: '[name].js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ],
      },
      {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader'
        ],
      },
      {
        test: /\.sass$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader?indentedSyntax'
        ],
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
            // the "scss" and "sass" values for the lang attribute to the right configs here.
            // other preprocessors should work out of the box, no loader config like this necessary.
            'scss': [
              'vue-style-loader',
              'css-loader',
              'sass-loader'
            ],
            'sass': [
              'vue-style-loader',
              'css-loader',
              'sass-loader?indentedSyntax'
            ]
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']
  },
  devServer: {
    proxy: {
      '*': {
        target: 'https://localhost:44369/',
        changeOrigin: true,
        secure: false
      },
      port: 8080,
      host: '0.0.0.0',
      hot: true,
      inline: true
    }
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

当我更改 main.js 中的消息时，没有任何反应，即使我刷新，即使 webpack 服务器告诉我事情正在发生。

【问题讨论】：

如果您进行硬刷新，您的代码更改是否会反映在网页上？（webpack的控制台说编译完成后）
不，他们不是。这很奇怪，因为控制台说它已更新 webpacktest.js（这是输出文件）但是当我检查它的内容时，它并没有改变。
我现在很困惑。当我转到 localhost:8080/wwwroot/bundle/webpacktest.js 时，我可以看到我的更改，但在 Visual Studio 和应显示更改的实际网页上，它们不存在。
@AndyFurniss 你有想过这个吗？我在看同样的问题。下面的答案看起来很复杂，而且这个当前的设置似乎工作得很好，减去了热重载。

标签： javascript asp.net-mvc vue.js webpack

【解决方案1】：

如果您将文件物理写入磁盘，热重载将无法工作。

我创建了这个结合了 .NET MVC 和 Vue.js 的模板。您可以使用整个 Vue 生态系统，但如果您不希望它出现在任何页面上，您可以选择退出。

GitHub：https://github.com/danijelh/aspnetcore-vue-typescript-template

中等：https://medium.com/@danijelhdev/multi-page-net-core-with-vue-js-typescript-vuex-vue-router-bulma-sass-and-webpack-4-efc7de83fea4

您可以将其用作示例或起点。

【讨论】：

【解决方案2】：

将此行添加到 startup.cs

  app.Run(async (context) =>
  {
    context.Response.ContentType = "text/html";
    await context.Response.SendFileAsync(Path.Combine(env.WebRootPath, "index.html"));
  });

【讨论】：