美文网首页让前端飞
14 -vue 打包图片路径错误解决

14 -vue 打包图片路径错误解决

作者: 大大的小小小心愿 | 来源:发表于2018-12-05 14:28 被阅读0次

    一、构建 VUE 项目

    直接用官网的方式建立vue 项目

    vue init webpack vue-demo
    

    二、打包 VUE 项目

    npm run build
    

    2.1 打包项目介绍

    会在项目根目录下出现一个 dist 文件夹,项目目录如下图:

    打包.png

    .
    1、这便是打包后的文件,直接将dist 文件夹放到服务器就可以。
    2、原 vue 下 src/assets/ 内的文件会被压缩、转为Base64等;
    3、原 vue 下 static/ 下的文件,会直接放入压缩后的 static/ 内。


    三、打包后的 dist 项目 白屏、图片路径错误解决。

    我们直接打开 dist/index.html 发现页面为白屏,且图片路径也发生错误。这需要对打包过程进行配置。

    1、 config->index.js 修改: config.png
    2、build->utils.js 添加: utils.png
    3、图片路径的写法

    (1)src/assets/ 下:

    <img src="../assets/img/loginback.png" class="test-img" />            // html
    
    background: url('../assets/img/loginback.png') no-repeat top left ;   // css
    

    (2)static/ 下:

    <img src="../../static/img/loginback.png" class="test-img" />            // html
    
    background: url('../../static/img/loginback.png') no-repeat top left ;   //  css
    

    参考文献:
    https://www.cnblogs.com/muamaker/p/8023522.html
    https://blog.csdn.net/qq_25479327/article/details/79625621

    相关文章

      网友评论

        本文标题:14 -vue 打包图片路径错误解决

        本文链接:https://www.haomeiwen.com/subject/vwamfqtx.html