如何在VS2019 .NET Core 3.1中使.vue文件正常运行

阿华AIGC实验室

2026-5-8

我完全理解你折腾了这么久的挫败感——把Vue单文件组件整合进VS2019的.NET Core 3.1项目里，看起来应该很简单，但实际踩坑确实让人头疼。下面是一个极简、可直接运行的步骤，跟着走就能搞定：

步骤1：创建基础.NET Core MVC项目

打开VS2019，点击「创建新项目」
选择「ASP.NET Core Web应用程序」，点击「下一步」
填写项目名称，选择存储路径，点击「创建」
框架选择**.NET Core 3.1**，模板选「Web应用程序(Model-View-Controller)」，点击「创建」

步骤2：配置前端依赖

右键项目 → 「添加」→ 「新建项」
搜索并选择「npm配置文件(package.json)」，点击「添加」
替换package.json的内容为以下代码：

{
  "name": "vue-dotnet-demo",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "webpack": "^4.44.2",
    "webpack-cli": "^3.3.12",
    "vue-loader": "^15.9.6",
    "vue-template-compiler": "^2.6.11",
    "css-loader": "^5.0.1",
    "style-loader": "^2.0.0"
  },
  "scripts": {
    "build": "webpack --mode development"
  }
}

右键package.json → 「安装npm包」，等待所有依赖安装完成（可能需要几分钟）

步骤3：添加Webpack配置文件

在项目根目录新建名为webpack.config.js的文件，内容如下：

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

module.exports = {
    // 入口文件：我们的Vue应用入口
    entry: './wwwroot/js/app.js',
    // 输出文件：打包后的js会生成在这里
    output: {
        path: path.resolve(__dirname, 'wwwroot/dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            // 处理.vue单文件组件
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            // 处理组件内的css
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }
        ]
    },
    plugins: [
        // 必须添加的VueLoader插件，否则.vue文件无法正确编译
        new VueLoaderPlugin()
    ],
    resolve: {
        // 配置Vue的别名，确保能正确导入Vue的完整版本
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        },
        extensions: ['*', '.js', '.vue', '.json']
    }
};

步骤4：创建Vue单文件组件和入口文件

在wwwroot目录下新建js文件夹
在js文件夹里新建components子文件夹
在components里新建HelloWorld.vue文件，内容：

<template>
    <div class="hello-container">
        <h1>{{ greeting }}</h1>
        <p>这是一个在.NET Core 3.1里运行的Vue单文件组件！</p>
        <button @click="count++">点击次数：{{ count }}</button>
    </div>
</template>

<script>
export default {
    name: 'HelloWorld',
    data() {
        return {
            greeting: 'Hello Vue + .NET Core!',
            count: 0
        }
    }
}
</script>

<style scoped>
.hello-container {
    text-align: center;
    padding: 50px;
    background-color: #f8f9fa;
    border-radius: 8px;
    max-width: 600px;
    margin: 20px auto;
}

button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}
</style>

在js文件夹里新建app.js（Vue应用入口），内容：

// 导入Vue核心库
import Vue from 'vue';
// 导入我们的HelloWorld组件
import HelloWorld from './components/HelloWorld.vue';

// 初始化Vue实例，挂载到页面的#app元素上
new Vue({
    el: '#app',
    render: h => h(HelloWorld)
});

步骤5：修改视图页面，引入Vue应用

打开Views/Home/Index.cshtml，替换全部内容为：

@{
    ViewData["Title"] = "Vue + .NET Core Demo";
}

<!-- 这是Vue应用的挂载点 -->
<div id="app"></div>

<!-- 引入webpack打包后的js文件 -->
<script src="~/dist/bundle.js"></script>

步骤6：配置自动打包

为了避免每次修改Vue组件后手动执行webpack命令，我们可以配置预生成事件：

右键项目 → 「属性」→ 切换到「生成事件」标签页
在「预生成事件命令行」里添加：

cd "$(ProjectDir)"
npm run build

这样每次你按F5运行项目时，VS会自动执行webpack打包命令，更新bundle.js

步骤7：运行项目

点击VS工具栏的「启动调试」（或按F5），等待项目启动后，你就能看到页面上渲染出Vue组件的内容，点击按钮还能看到计数功能正常工作！

一些注意事项

确保你已经安装了Node.js 12.x或14.x版本（过高版本可能和.NET Core 3.1的npm工具兼容有问题）
如果npm安装依赖失败，尝试删除项目根目录的node_modules文件夹和package-lock.json文件，然后重新右键package.json安装npm包
如果页面没有渲染出Vue内容，检查wwwroot/dist目录是否生成了bundle.js，如果没有，手动在项目根目录打开命令行，执行npm run build看看有没有报错

内容的提问来源于stack exchange，提问作者Midiman7472