今天在插入背景图片过程中,遇到了路径错误的问题,通过网上查询,找到了解决的办法,但是大部分都没有讲造成这种问题的原因,故我简单地总结了一下,并加入了一些自己的理解,欢迎共同探讨~

    当用vue-cli自动构建项目后,有两种运行方法,分别是:

    npm run dev : 提供一个开发的环境,自动热更新,资源使用绝对路径,所以可以正常看到背景图片。

    npm run build : 打包项目,资源使用相对路径,所以会出现路径错误问题。

绝对路径:从盘符开始的路径,如:C:windowssystem32cmd.exe

相对路径:从当前路径开始的路径

构建后的项目, 都需要读取静态资源,静态资源分为三种,
JS, CSS, IMG,目录结构如下:

//结构目录

index.html

static

|--img

|--picname

|--css

|--app.css

|--js

|--app.js
   此时通过img标签引入的图片显示正常,是因为img为html标签,他的路径是由index.html开始访问的,他走static/img/'图片名'是能正确访问到图片的

但是app.css访问static/img/'图片名'是访问错误的,因为在css目录下并没有static目录。所以此时需要先回退两层到根节点处才可以正确获取到图片。

具体办法是:

打开build/utils.js,在图中相应位置加入红框内容,其中值可能会有不同,若不同,自己配置成相应的即可。

if (options.extract) {
            return ExtractTextPlugin.extract({
                use: loaders,
                publicPath: '../../',
                fallback: 'vue-style-loader'
            })
        } else {
            return ['vue-style-loader'].concat(loaders)
        }