zoukankan      html  css  js  c++  java
  • vue项目打包后路径出错

    安装完vue后搭建了一个项目,直接执行 npm run dev 是可以正常打开页面的:

    但是执行 npm run build 打包项目后打开却报错了,如下:

    原来是项目中的静态文件路径报错了。。。

    然后就针对这个问题去查找解决方法:

    第一步:

    第二步: 找到下面文件,添加一行代码:

    publicPath: '../../'

    第三步:

    重新执行 npm run build  ,再次打开成功   

     说明:  这里的打开方式:在builder编辑器里面直接打开打包后的dist文件夹下的index.html,打开后的地址 : http://127.0.0.1:8020/poverty_front/dist/index.html

    -----------------------------------------------------------------------------------------  这里是分界线  2018 - 08 - 03   --------------------------------------------------------------------------------------------------------------------------------

    然而我们把项目部署到服务器后,这里是在本地的dist下运行http-server,就相当于部署到服务器,这个时候打开的路径是  http://127.0.0.1:8081/#/homePage  (路由里面对首页做了重定向,所以看不到index.html)

    scss文件里面的一个背景图片是: 

    background:url(../../images/home/capitalAccount/bg_pic_1.png) no-repeat center center;  

    这个图片跟其他正常显示的图片不一样的地方是它的大小是17.3KB,所以在浏览器查看代码的时候可以看到其显示的方式也不一样,这个图片显示的是绝对路径,而其他小的图片显示的是转码后的base64编码,如下图:

    然后我们再看下webpack的配置文件: 

    其中limit就是限制图片的大小,超过这个值后就会把图片打包到指定的路径下

    知道出现错误的原因后,我们来看如何解决这个问题的:

    我们分析下上面打开的两个不同路径,我们发现部署到服务器的根目录是 http://127.0.0.1:8081 ,而没部署到服务器打开的根目录是  http://127.0.0.1:8020/poverty_front/ ,然后我们就可以看到没部署到服务器上的路径多了一个dist层的。

    所以我们看回到上面的第一张图片,我们把原来的“/”改成了"./",从而实现了使用 http://127.0.0.1:8020/poverty_front/dist/index.html 下路径正常。相反的,因为部署后的路径和本地打开的路径是不一样的,所以这样就会导致部署后的路径会出错了。

     

    所以我们的解决方案就是把上面的"./"改回原来的"/",因为其他的一些问题,直接在本地打开就是不可运行的,都是通过http-server来运行。

  • 相关阅读:
    Java原始数据类型
    Java文件教程
    Java.util.ArrayDeque类
    Java 简介
    面向对象的程序设计
    Java8默认方法
    divide方法
    java.lang.Boolean.compareTo()方法实例
    AWT Button类
    Java的核心优势
  • 原文地址:https://www.cnblogs.com/stella1024/p/9239030.html
Copyright © 2011-2022 走看看