背景介绍

小博本身一直在用 webapi + angular 的开发，很早就放弃了 mvc 了，但最近有些小伙伴私信我，说 mvc 运行遇到了问题，小博就找了个时间看了看，这里给大家上一个教程。

教程中，小博认为简单的就一句话略过，如有问题可以在下方留言即可。

准备工作

• nodejs 必须
• yarn 必须

包还原问题

在用 vs 打开 web.sln 后，当你重新生成解决方案时，vs 会自动开启任务来还原 npm 包，但是由于需要的时间有点长，小博建议还是手动还原比较好一点。

打开 package.json 文件先看看，abp 官方为我们提供了一些 scripts。

"scripts": {
    "bundle": "dotnet bundle",
    "bundle-clean": "dotnet bundle clean",
    "bundle-watch": "dotnet bundle watch",
    "restore": "dotnet restore",
    "copy-node-modules": "gulp copy:node_modules",
    "package-install": "yarn",
    "bundle-clean:bundle": "npm run bundle-clean && npm run bundle",
    "create-bundles": "gulp copy:node_modules && npm run bundle-clean:bundle",
    "package-install-create-bundles": "npm run package-install && npm run create-bundles",
    "full-build": "npm run restore && npm run package-install-create-bundles"
},

打开 cmd , 进入 mvc 项目目录，这里先不要 运行 yarn install 或者 npm install， 先看看下这些脚本。

先看第四个 script，是 NuGet 包还原命令， 这里小伙伴们可以通过 vs 包管理还原，也可以通过 yarn restore 或者 npm run restore 来还原，不过小伙伴们这里先不需要着急着运行，接着往下看。

再看第六个 script，是 npm 包还原命令， 可以通过 yarn package-install 或者 npm run package-install 来还原，不过这里也先不运行，接着往下看。

再看第五个 script，这个就是很多小伙伴们出错的根本所在，在官方有这么一段话，大意就是说 node_modules 文件太大，不好直接放到项目中，然后 通过新建一个 gulp 任务把 文件复制到 wwwroot/lib 下，详细可以查看官方文档。

NPM installs dependencies into node_modules folder which will be placed in the root folder of MVC project. But, in ASP.NET Core, it is suggested to place client side libraries under wwwroot folder. Also, size of node_modules folder will be very big (more than 250 MB) and we don’t want to send all of those files to production when we publish our application. In order to overcome this, we have used gulp to move necessary files from *.Web.Mvc/node_modules to *.Web.Mvc/wwwroot/lib. Mapping from node_modules to wwwroot/lib folder is defined in package-mapping-config.js file. So, when you add a new package to your solution, you also need to add a mapping to this file defining the files you want to move from node_modules to wwwroot/lib folder for newly added package.

第五个 script 就是解决这个的，详细配置可以看package-mapping-config.js，这里可以运行 yarn copy-node-modules，完成后，在 wwwroot/lib 下就有对应的文件了，这里小伙伴们还是先不要着急着运行，接着往下看。

接着看前 3 个 scripts，这3个是打包脚本，主要是把一些资源文件打包为一个资源文件，详细可以看 bundleconfig.json 文件内容，这里可以运行 yarn bundle，不过还是不急着运行，接着往下看。

最后，我们看最后一个 script，哈哈，full-build，是不是知道我为啥说前面的都不需要运行了，没错，因为这个 script 把前面的命令都包含了。

现在我们来运行它： yarn full-build 。

大功告成，让我们来运行 项目看看，是不好了呢。