Visual Studio 2017+Asp.Net Core 2.1+Vue+TypeScript非SPA项目配置求助

嘿，我完全懂你这种卡在配置上的烦躁——尤其是.NET Core版本变动、习惯了传统JS开发又没法用VS Code的情况下，折腾了好几周肯定头大。下面给你一份从新建项目到跑通Demo的分步指南，亲测适配你的场景：

• 打开Visual Studio，选择「创建新项目」，找到「ASP.NET Core Web 应用程序」（别选React/Vue那种SPA模板），指定.NET Core 2.1版本，命名后点击创建；
• 选择「Web应用程序（模型-视图-控制器）」模板，确保不勾选任何SPA相关选项，完成项目创建。

• 在项目根目录（和.csproj文件同层级）打开命令行：可以用VS自带的「工具→NuGet包管理器→程序包管理器控制台」，或者直接右键文件夹开终端；
• 执行初始化命令：

  npm init -y
  

• 安装所需依赖：

  npm install vue typescript webpack webpack-cli ts-loader vue-loader vue-template-compiler --save-dev
  npm install vue --save
  

  简单解释：ts-loader处理TypeScript转译，vue-loader解析.vue文件，webpack负责打包，typescript提供TS语法支持。

• 在项目根目录新建tsconfig.json文件，粘贴以下内容：

  {
    "compilerOptions": {
      "target": "es6",
      "module": "commonjs",
      "strict": true,
      "esModuleInterop": true,
      "skipLibCheck": true,
      "forceConsistentCasingInFileNames": true,
      "moduleResolution": "node",
      "resolveJsonModule": true,
      "allowJs": true,
      "sourceMap": true
    },
    "include": [
      "./src/**/*"
    ]
  }
  

  重点：module设为commonjs是为了支持ES6的require语法，include指定TS文件的存放目录，后面我们会创建这个目录。

• 同样在根目录新建webpack.config.js，内容如下：

  const path = require('path');
  const VueLoaderPlugin = require('vue-loader/lib/plugin');
  
  module.exports = {
    entry: './src/main.ts',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'wwwroot/js')
    },
    module: {
      rules: [
        {
          test: /\.ts$/,
          loader: 'ts-loader',
          options: {
            appendTsSuffixTo: [/\.vue$/]
          }
        },
        {
          test: /\.vue$/,
          loader: 'vue-loader'
        }
      ]
    },
    resolve: {
      extensions: ['.ts', '.js', '.vue'],
      alias: {
        'vue$': 'vue/dist/vue.esm.js'
      }
    },
    plugins: [
      new VueLoaderPlugin()
    ],
    devtool: 'source-map'
  };
  

  说明：entry是前端代码的入口文件，output指定打包后的JS文件存放到ASP.NET默认的静态文件目录wwwroot/js，规则里配置了TS和Vue文件的解析器，确保模块能正确导入。

• 在项目根目录新建src文件夹，然后在src里创建两个文件：
  1. main.ts（Vue入口文件）：

     import Vue from 'vue';
     import App from './App.vue';
     
     new Vue({
       el: '#app',
       render: h => h(App)
     });
     

  2. App.vue（Vue组件）：

     <template>
       <div>
         <h1>Hello Vue + TypeScript + .NET Core!</h1>
         <p>这是一个测试用的简单Vue应用</p>
       </div>
     </template>
     
     <script lang="ts">
     import Vue from 'vue';
     
     export default Vue.extend({
       name: 'App'
     });
     </script>
     

• 打开项目的.csproj文件，在<Project>标签内添加以下配置，这样VS构建项目时会自动执行webpack打包：

  <Target Name="RunWebpack" BeforeTargets="Build">
    <Exec Command="npm install" Condition="!Exists('node_modules')" />
    <Exec Command="npx webpack --mode production" />
  </Target>
  

  以后每次点击VS的「生成」按钮，都会先安装依赖（如果没装过），再自动打包前端代码到wwwroot/js。

• 打开Views/Home/Index.cshtml，替换原有内容为：

  @{
      ViewData["Title"] = "Home Page";
  }
  
  <div id="app"></div>
  
  <script src="~/js/bundle.js"></script>
  

  这里的#app是Vue应用的挂载容器，然后引入打包好的bundle.js即可。

• 点击VS的「启动调试」按钮，项目运行后，主页会显示Vue渲染的内容，说明整个配置流程成功了！

这个方案专门适配了.NET Core 2.1的规则，解决了TS转译支持require语法的问题，所有操作都可以在Visual Studio内完成，不用依赖VS Code。

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