module.exports = { 
entry: { app: './wwwroot/js/app.js' }, 
output: { 
publicPath: "/dest/js/", 
path: path.join(__dirname, '/wwwroot/dest/js/'), 
filename: '[name].bundle.js'
 }
}

将Vue.JS与ASP.NET Core MVC Web应用程序集成

import $ from 'jquery';
 Import the Bootstrap Material Design Theme
import 'bootstrap-material-design/dist/css/bootstrap-material-design.min.css';
import 'bootstrap-material-design/dist/js/bootstrap-material-design.min.js';
import 'material-design-colors/dist/material-design.min.css';

 Import the App Styles
import '../css/app.css';

 Initialize the Material Design elements when the page loads
$(document).ready(function () {
    $('body').bootstrapMaterialDesign
    $('[data-toggle="popover"]').popover

注意：我添加此文件仅作为示例。在这个项目中，我避免使用设计/material-icon，而是专注于配置。

{
  "name": "HR.App.Web",
  "version": "1.1.1",
  "private": true,
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2017": "^6.24.1",
    "bootstrap": "^4.1.3",
    "bootstrap-material-design": "^4.1.1",
    "css-loader": "^1.0.0",
    "fuse.js": "^3.2.1",
    "jquery": "^3.3.1",
    "material-design-colors": "^1.0.2",
    "style-loader": "^0.19.0",
    "uglifyjs-webpack-plugin": "^1.3.0",
    "url-loader": "^0.6.2",
    "vue": "^2.6.10",
    "vue-loader": "^15.4.2",
    "vue-template-compiler": "^2.5.17",
    "webpack": "^4.20.2",
    "webpack-cli": "^3.1.1",
    "webpack-dev-server": "^3.1.9"
  },
  "dependencies": {}
}

如果要使用NPM Task Runner资源管理器从package.json文件安装/更新软件包，请确保安装了NPM Task Runner资源管理器。如果没有看到Task Runner Explorer，请选择Package.json并单击鼠标右键。现在在Task Runner Explorer中，在package.json中选择安装。然后单击鼠标右键，如下图所示。结果，将安装所有软件包。

"use strict";
const { VueLoaderPlugin } = require('vue-loader');
const path = require('path');
const webpack = require('webpack');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
    entry: {
        app: './wwwroot/js/app.js',
        home: './Views/Home/Index.cshtml.js',
        errorDetail: './Views/Home/ErrorDetail.cshtml.js'
           },
    plugins: [
        new webpack.ProvidePlugin({
            '$': 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery',
            Popper: ['popper.js', 'default']
        }),
        new VueLoaderPlugin()
    ],

    optimization: {
        minimizer: [
            new UglifyJsPlugin({
                cache: true,
                parallel: true,
                uglifyOptions: {
                    compress: false,
                    ecma: 6,
                    mangle: true
                },
                sourceMap: true
            })
        ]
    },
    output: {
        publicPath: "/dest/js/",
        path: path.join(__dirname, '/wwwroot/dest/js/'),
        filename: '[name].bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /(node_modules)/,
                query: {
                    presets: ['es2017']
                }
            },
            {
                test: /\.css$/,
                loaders: ['style-loader', 'css-loader']
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 8192
                    }
                }
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            }
        ]
    },
    resolve: {
        alias: {
            vue: 'vue/dist/vue.js'
        },
        extensions: ['.js', '.vue']
    }
};

我已经在最上面说明了，我们需要使用“Entry”来配置js文件的源，并使用路径来稍后获取该捆绑包。

entry: { app: './wwwroot/js/app.js', home: './Views/Home/Index.cshtml.js'}

输出：这是已编译JavaScript文件的输出路径和包名的配置。

output: { publicPath: "/dest/js/", path: path.join(__dirname, '/wwwroot/dest/js/'),
        filename: '[name].bundle.js'}

如果要使用web-pack Task Runner Explorer编译并捆绑JS文件，请确保安装了Web-Pack Task Runner Explorer。如果没有看到Task Runner Explorer，请选择webpack.config.js并单击鼠标右键。现在在Task Runner Explorer中，在webpack.config.js中选择Run，然后单击鼠标右键，如下图所示。结果，所有JS文件都将构建到输出目录（wwwroot\dest\js）。

import Vue from 'vue';
import Dropzone from 'vue2-dropzone';

document.addEventListener('DOMContentLoaded', function (event) {
    let view = new Vue({
        el: document.getElementById('view'),
        components: {
            "dropzone": Dropzone
        },
        data: {
            message: 'This is the index page',
            useUploadOptions: true,
            uploadOptions: {
              acceptedFiles: '.png,.jpg,.pdf',
              dictDefaultMessage: 'To upload the file click here. Or, drop a file here.',
              maxFiles: 1,
              maxFileSizeInMB: 20,
              addRemoveLinks: true
            }
        },
        methods: {
            onUploaded: function (file, response) {
                if (response.status === "OK" || response.status === "200") {
                    console.log('Successfully uploaded!');
                }
                else {
                    this.isVisible = false;
                    console.log(response.message);
                }
            },
            onUploadError: function (file, message, xhr) {
                console.log("Message ====> " + JSON.stringify(message));
            }
        }
    });
});

[HttpPost("/Home/SubmitFile")]
public async Task<ActionResult> SubmitFile(IFormFile file)
{
       try
       {
              To do: Validation
              To do: check file-content
             string webRootPath = hostingEnvironment.WebRootPath;
             string fileLandingPath = Path.Combine(webRootPath, folderName);

             StreamReader stream = new StreamReader(file.OpenReadStream());

             if (!Directory.Exists(fileLandingPath))
             {
                    Directory.CreateDirectory(fileLandingPath);
             }

             string filePath = string.Format("{0}\\{1}{2}", fileLandingPath,
                    Path.GetFileNameWithoutExtension(file.FileName), 
                    Path.GetExtension(file.FileName));

             using (var fileStream = new FileStream(filePath, FileMode.Create))
             {
                    await file.CopyToAsync(fileStream);
             }

             var jsonResult = Json(new { status = "OK" });
             return jsonResult;
       }
       catch (Exception ex)
       {
             return Json(new { status = "Error", message = ex.Message });
       }
}