为什么用vue脚手架在vscode里面打开显示不了

在vscode里面打开后显示的一个本地文件,不是vue的网站,vue脚手架项目刚刚建好的在vscode里面就报错了,怎么弄都弄不好,有没有能教教我

img

img

不知道你这个问题是否已经解决, 如果还没有解决的话:
  • 帮你找了个相似的问题, 你可以看下: https://ask.csdn.net/questions/7678013
  • 你也可以参考下这篇文章:使用vscode运行vue项目
  • 除此之外, 这篇博客: 使用Vscode调试vue代码中的 修改vscode配置 部分也许能够解决你的问题, 你可以仔细阅读以下内容或者直接跳转源博客中阅读:

    1、修改config/index.js

    • 使用 Vue CLI 2
      打开 config/index.js 并找到 devtool property。将其更新为:
    devtool: 'source-map', 
    
    • 使用 Vue CLI 3
      请设置并更新 vue.config.js 内的 devtool property
    module.exports = {
      configureWebpack: {
        devtool: 'source-map'
      }
    }
    

    2、配置launch.json 的文件
    点击在 Activity Bar 里的 Debugger 图标来到 Debug 视图,然后点击那个齿轮图标来配置一个 launch.json 的文件。
    在这里插入图片描述将生成的 launch.json 的内容替换成为相应的配置:

    {
      "version": "0.2.0",
      "configurations": [
        {
          "type": "chrome",
          "request": "launch",
          "name": "vuejs: chrome",
          "url": "http://localhost:8080",
          "webRoot": "${workspaceFolder}/src",
          "breakOnLoad": true,
          "sourceMapPathOverrides": {
            "webpack:///src/*": "${webRoot}/*"
          }
        },
        {
          "type": "firefox",
          "request": "launch",
          "name": "vuejs: firefox",
          "url": "http://localhost:8080",
          "webRoot": "${workspaceFolder}/src",
          "pathMappings": [{ "url": "webpack:///src/", "path": "${webRoot}/" }]
        }
      ]
    }
    

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^

可以看一下你的整个文件结构吗,
创建改项目之后,在终端里执行 npm run dev 将项目跑起来 通过预览地址就可以看自己的网页了