基于.NET6和VUE3搭建SPA应用

.NET 出到 6 之后，原本官方的 [SPA 套件]被弃用(https://github.com/dotnet/aspnetcore/issues/12890)，新版改成使用 Vue-CLI + SPA Proxy。

环境

# 确认.NET版本,此处为 6.0.200
dotnet --version

# 确认Node版本,此处为 v16.4.0
node --version

新建.NET项目

# 新建react模板项目
dotnet new react

前端文件放在ClientApp目录,清空此目录下所有文件并使用Vue-CLI新建Vue项目并修改对应参数即可

新建Vue项目

# 安装Vue CLI, 此处使用版本 v5.0.1
npm install -g @vue/cli

# Vue CLI 不允许大写字母，此处使用 client-app作为项目名
vue create client-app

# 安装依赖
npm install

# 运行测试
npm run dev 

配置

打开项目.csproj文件,修改SpaRoot节点值为client-app所在目录，并注意这里的SpaProxyServerUrl 节点的值是前端的访问地址，SpaProxyLaunchCommand是npm start是前端的启动命令。

[^注意]若SpaProxyServerUrl是HTTPS需要改成http。
[^注意]每次新建.NET项目时对应的端口都不一样，前端需要改成对应的端口。

...
<PropertyGroup>
  ...
  <SpaRoot>client-app\</SpaRoot>
  <SpaProxyServerUrl>http://localhost:44405</SpaProxyServerUrl>
  <SpaProxyLaunchCommand>npm start</SpaProxyLaunchCommand>
  ...
</PropertyGroup>
...

修改package.json,在scripts中添加启动命令

"scripts": {
  "start": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint"
}

修改vue.config.js,将devServer port换成44405。

const { defineConfig }  = require('@vue/cli-service')
module.exports = defineConfig({
  devServer: {
    port: 44405,
  },
  transplieDependencies: [
    'vuetify'
  ]
})