创建vue项目遇到这个问题怎么解决,前几天都没有今天突然这样了。
是latest不是leatest吧
npm init vue@latest
不知道你这个问题是否已经解决, 如果还没有解决的话:首先,出错点在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目录。这样就造成了路径访问失败的问题。