VS2022 使用Standalone JavaScript Vue Template创建的Vue版本不是3.0

Posted 2022-01-07 lee576

 实践出真知，这话一点不假，之前在微信公众号上看的一篇文章，说是用这个模板创建Vue 3.0 + WebApi的项目，结果自己照着创建一个就是各种坑和问题，可能是新东西出来还不成熟吧！使用 Vue 3.0的Setup语法糖居然编译错误

使用查看当前的Vue版本

npm list vue

结果查到版本是 2.6.4 不是 3.0！使用 如下命令升级Vue

npm install vue@3.0

安装完成，运行，结果遇到如下错误

Error: Cannot find module '@vue/compiler-sfc/package.json'

运行

npm i @vue/compiler-sfc

错误消除，以上还是有问题，这条路不太容易走的通，我最终放弃了，使用vue code来创建一个新的Vue 3.0项目，xxx为你的项目名

vue create xxx

这时候你的Vue项目连接.net 6创建的接口仍然有问题（主要是https证书引发的问题），不过不用担心，之前用VS 2022创建的模板项目下面那个vue.config.js配置文件可以解决这个问题，配置内容如下

const fs = require('fs')
const path = require('path')

const baseFolder =
    process.env.APPDATA !== undefined && process.env.APPDATA !== ''
        ? `$process.env.APPDATA/ASP.NET/https`
        : `$process.env.HOME/.aspnet/https`;

const certificateArg = process.argv.map(arg => arg.match(/--name=(?<value>.+)/i)).filter(Boolean)[0];
const certificateName = certificateArg ? certificateArg.groups.value : "vueproject1";

if (!certificateName) 
    console.error('Invalid certificate name. Run this script in the context of an npm/yarn script or pass --name=<<app>> explicitly.')
    process.exit(-1);


const certFilePath = path.join(baseFolder, `$certificateName.pem`);
const keyFilePath = path.join(baseFolder, `$certificateName.key`);

module.exports = 
    devServer: 
        https: 
            key: fs.readFileSync(keyFilePath),
            cert: fs.readFileSync(certFilePath),
        ,
        proxy: 
            '^/weatherforecast': 
                target: 'https://localhost:5001/'
            
        ,
        port: 5003
    

如此便解决了访问 https 接口时，证书的问题