Webpack+Vue2.0工程图片路径问题

Webpack+Vue2.0工程图片路径问题

1.src目录结构

app.vue entry.js index.html assets

images //存放图片资源

styles //存放全局样式文件

…

components //Vue通用组件

tab.vue

table.vue

…

config //全局通用配置等

api.js

…

pages // 页面文件

tabs-base.vue

tab-home.vue

…

router //vue-router路由配置

routers.js

2.非 Vue-cli 搭建 Webpack - Vue2 工程

.*.vue文件中style标签中background-image属性

现象:背景图片无法加载

相关知识:
url-loader 在使用中需要配置publicPath和outputPath两个参数:

publicPath 参数回答了生产环境中的样式文件里应该到哪个地址寻找图片

publicPath 用来设置在输出的文件中替换样式中书写的相对路径，即将’../assets/images/icon.jpg’替换为’${publicPath}/icon.jpg’,主要影响代码中样式文件的内容

outputPath 参数回答了生产环境中该把图片资源放在哪个地址

outputPath 用来设置在webpack打包时将用到的图片资源放置在相对于打包目录下的某个路径，可以为更深层次的路径，若设置为'/' ,则将图片复制到打包路径(多为/dist 或 /output 或 /build)， 若设置为 /images （如本例中）,则会将文件赋值到’/dist/images’目录

原因分析:
publicPath设置为'/',outputPath设置为'/images' 导致，即打包时将图片复制到了/dist/images/目录中，而样式文件中的url地址却被替换为/，即在网站根目录寻找，相当于在/dist目录中寻找，故出现404错误。

有效用法:
.vue中的样式部分

<style scoped>
 .page__hd::after{ 
       background-image: url('../assets/images/page_title_total.jpg');
       background-size: 100% auto;
       background-position: 0 50%;
    }
</style>

//webpack.config.js中有关图片部分的配置
const publicPath = '/' 

//module中处理图片部分代码
 {
      test: /\.(gif|png|jpeg|jpg|svg)$/,
      use: [{
           loader: 'url-loader',
           options: {
                    limit: 8192,
                    name: '[name].[ext]',
/*
*起初图片无法被加载时，此处的写的是
    publicPath : publicPath
*/
                    publicPath: publicPath + 'images/', 
                    outputPath: 'images/'
                }
            }]
  },

*.js文件中字符串形式指定图片地址

现象:js中字符串形式指定图片相对地址，用:url=绑定至html页面无法加载

相关知识:
图片资源需要被当做资源import进定义路径的js文件中，否则webpack打包时只会将相对路径的值当做普通字符串赋值，当然直接修改字符串的值也可以达到效果，但往往会出现开发环境和生产环境相对地址不同的情况,影响开发效率。

原因分析:
见相关知识

有效用法:
.vue中的样式部分

   <img 
       :src="tab.iconPath" 
       class="weui-tabbar__icon" 
       alt="">

//将写法1改为写法2
//写法1
 const tabs = [
        {
            id:0,
            label:'今日',
            to:'/tabs/week',
            iconPath:'../assets/images/icon_nav_article.png',
            isActive:true
        }]
//写法2
import Icon1 from '../assets/images/icon_nav_article.png'
 const tabs = [
        {
            id:0,
            label:'今日',
            to:'/tabs/week',
            iconPath: Icon1,
            isActive:true
        }]

Tips：
许多代码中在import图片时路径前使用了@符号，这需要在webpack中配置路径别名才会生效，实际上直接按相对地址应用可以实现同样的效果。