• vue打包静态资源后显示空白及static文件路径报错


    1、打包之后打开dist的页面显示空白:

      这个是打包项目比较常见的一个错误

      改一下config下面的index.js中bulid模块导出的路径。因为打包后的index.html里边的内容都是通过script标签引入的,默认显示的路径不对,打开肯定是空白的。

      

       

      2.src里边router/index.js路由配置里边默认模式是mode:'hash'(页面会在路由上加#),有时候改成了history(纯净路由)模式的话,打开也会是一片空白。所以改为hash或者直接把模式配置删除,让它默认的就行 。

      

    export default new Router({
    //mode: 'history',
    mode:'hash',\或者直接不写
      routes: [{}]
    )}

     3. 当打包后的图片访问路径是 /dist/static/css/static/img    

       在build/utils.js添加配置publicPath: '../../'

      

    打包后找不到响应路径:

    这都是比较常见的几种解决方式,如果将静态资源的图片路径作为绑定数据以js引入,图片放入了static里面用来引入这个页面又该怎样处理呢,如果以绝对路径访问vue打包是不会处理这一类的,所以打包后它图片访问的路径不会更改,而打包后dist文件里就只有index.html和webpack不会处理的static文件夹(vue static/下的文件都不会被Webpack处理:它们使用相同的文件名,直接拷贝到最终的路径)

    解决方式有两种,

    1.如果要上线的话,需要将你的主域名加在static之前然后他会逐级去访问打包后的文件。

    return {
        isShow:true,
        imgData:'',
        myUpPic:'/yourDN/static/img/logo.png'
    }

    2.由于vue将组件访问静态资源的路径配置好了,你可以直接/static来找到static下的文件,但是这里的问题就是你访问的时候它是逐级访问这些文件的,所以打包后他还是会找不到静态资源的文件,在这里你就需要将/static改成./static,这样的话他就会在打包后的文件夹下直接访问其之下的静态资源文件夹。

    return {
        isShow:true,
        imgData:'',
        //myUpPic:'/static/img/logo.png' 
        myUpPic:'./static/img/logo.png'
    }
  • 相关阅读:
    AI中台
    java的static关键字
    java多线程面试题整理及答案(2019年)
    一篇搞懂TCP的三次握手四次挥手
    异步注解Async
    常用的SQL语句大全
    用Intellij Idea导出可执行的jar包
    用Intellij Idea从Github上获取代码
    Thread线程源码解析,Java线程的状态,线程之间的通信
    dubbo配置启动时检查
  • 原文地址:https://www.cnblogs.com/Tohold/p/10310210.html
Copyright © 2020-2023  润新知