创建vue项目遇到这个问题怎么解决

创建vue项目遇到这个问题怎么解决,前几天都没有今天突然这样了。

img

是latest不是leatest吧


  npm init vue@latest
不知道你这个问题是否已经解决, 如果还没有解决的话:
  • 你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/7720958
  • 这篇博客也不错, 你可以看下【vue项目问题解决】如何用鼠标滚轮控制元素缩放?
  • 除此之外, 这篇博客: 关于Vue背景图打包之后访问路径错误问题中的 vue项目在打包之后背景图片访问出错? 部分也许能够解决你的问题, 你可以仔细阅读以下内容或者直接跳转源博客中阅读:

    首先,出错点在url-loader上面。

    // url-loader配置
    // build/webpck.base.conf.js
    {
      test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
      loader: 'url-loader',
      query: {
        limit: 10000,
        name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
    

    这里解释一下上面这段url-loader配置,test是正则匹配规则,匹配项目中所有的以正则规则结尾的格式的文件,直白点就是所以的图片(png,jpg,jpeg,gif,svg)。然后用url-loader进行处理。处理也有个规则如下,当不大于10000B的文件进行base64转码,就是将图片转为base64的格式。如果超过10KB的图片就单独打包到utils.assetsPath(‘img/[name].[hash:7].[ext]’) 这个目录下(从build/utils.js和config/index.js可以知道这个路径就是assetsPublicPath/assetsSubDirectory/img目录,并且图片名是进行hash之后的值,根目录下面没有static目录,所以会创建一个static目录,至于为什么最后没有看见这个目录后续再说),当我们创建了一个这样的目录之后,所以的图片访问路径就成了对应的assetsPublicPath/assetsSubDirectory/img/'图片名'。到这里就可以确定,如果小于10KB的图片转为base64,大于10KB的图片已经将图片路径改为了assetsPublicPath/assetsSubDirectory/img/'图片名',如果您的设置为assetsPublicPath: './',所得路径为./static/img/'图片'

    // 目前我们的目录结构
    index.html
    static
        |--img
            |--'picname'
        |--css
            |--app.css
        |--js
            |--app.js
    

    注意相对路径标识’./’,我们知道img为html标签,他的路径是由index.html开始访问的,他走./static/img/'图片名'是能正确访问到图片的,所以img的路径没问题,然后app.css访问./static/img/'图片名'是访问错误的,因为在css目录下并没有static目录。这样就造成了路径访问失败的问题。


  • 您还可以看一下 尹庆阳老师的手把手教你从0开始搭建一个vue项目课程中的 课程简介小节, 巩固相关知识点

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