vue项目，访问打包后的项目，输入路径后，页面加载空白。这时会有两类问题，都是路径问题。

1.一个是css,js,ico等文件加载不到，是目录里少了dist

打开页面时一片空白

解决办法：

config/index.js文件的build->assetsPublicPath的默认值改为 './'

assetsPublicPath：资源的根目录。这个是通过http服务器运行的url路径。因为webapp和static中间还有层dist,所以要用'./'

2.另一个就是单纯的在背景图使用相对路径导致加载不到图片

例如登录页面的背景图设置

我的目录结构是这样的，

页的时候没发使用@/../static   只能使用../../../static

这个时候，打包过后的登陆页面引用图片路径错误，多了一个/static/css

解决办法：

build/utils.js文件的ExtractTextPlugin.extract=>新增 publicPath:"../../"

publicPath:重写该加载器(loader) css 的 publicPath 的设置

vue-cli webpack打包后加载资源的路径问题的更多相关文章

  1. vue 使用webpack打包后路径报错以及 alias 的使用

    一.vue 使用webpack打包后路径报错(两步解决) 1. config文件夹 ==> index.js ==> 把assetsPublicPath的 '/ '改为 './' 2. b ...

  2. vue项目 webpack打包后，图片路径是绝对路径

    vue项目,使用webpack打包,虽然在全局把路径改成了相对的路径,但是图片引用的路径还是异常的,解决办法如下: 1.config文件夹下index.js中: assetsPublicPath:&q ...

  3. 配置vue项目将打包后图片文件的引用路径改为cdn路径?

    vue cli3项目, 需求: 图片文件打包时, 将项目内的所有图片文件的引用地址改为cdn路径 vue cli3的默认配置下, 打包后图片使用的是相对路径, 例如打包后项目内图片引用路径为 img/ ...

  4. vue项目webpack打包后修改配置文件

    从webpack打包结构中我们知道,vue中有一个存放外部资源的文件夹static,它里面的文件是不会被打包编译的,所以我们就可以利用外部引入js的方式将我们的想要的数据在index.html中以js ...

  5. webpack打包懒加载

    lazyload https://webpack.js.org/guides/lazy-loading/ 懒加载 -- 按需加载. Lazy, or "on demand", lo ...

  6. vue通过webpack打包后怎么运行

    1. 成功使用webpack打包完成后会默认得到dist的文件夹 2. dist文件夹中有html与其他的静态文件 3. 在dist文件夹中打开命令窗口或者git,开一个服务器(像anywhere) ...

  7. vue项目webpack打包后图片路径错误

    首先项目是vue-cli搭建的,项目结构如下: 然后发现在css里写的图片引用地址在开发时正常显示,但在打包扔上服务器之后报错 报的是404,路径前面多了/static/css,不知道为啥. 在自己慢 ...

  8. vue-cli构建路径加载资源出错问题

    这份文档是对应 @vue/cli 3.x 版本的,官方文档https://cli.vuejs.org/zh/guide/ 项目打包执行npm run build的时候,打开dist目录的index.h ...

  9. Vue项目用webpack打包后，预览时资源路径出错（文末有vue项目链接分享）

    最近用vue写了一些项目,项目写完之后需要打包之后才能放到网上展示,所以在这里记录一下项目打包的过程以及遇到的一些问题. --------------------------------------- ...

随机推荐

  1. codevs 4244 平衡树练习

    二次联通门 : codevs 4244 平衡树练习 Splay实测指针占用空间大约是数组的3倍, 且时间上也慢了差不多1s 数组版评测记录如下 指针版评测记录如下     以上数据仅限这一个题, 对于 ...

  2. NetworkX系列教程(10)-算法之二:最小/大生成树问题

    小书匠 Graph 图论  重头戏部分来了,写到这里我感觉得仔细认真点了,可能在NetworkX中,实现某些算法就一句话的事,但是这个算法是做什么的,用在什么地方,原理是怎么样的,不清除,所以,我决定 ...

  3. 第四组团队git现场编程实战

    组员职责分工 组员 分工 林涛(组长) 分配任务.整理数据.写博客 童圣滔 UI界面制作 林红莲 UI界面制作 潘雨佳 测评出福州最受欢迎的商圈 于瀚翔 测评出福州最受欢迎的商圈 覃鸿浩 测评出福州人 ...

  4. IDEA中获取资源路径问题

    更正 以src开始,就能用相对路径了... shift+ctrl+alt+s 调出项目结构, 在Modules里,就是设置 Sources Resources Test的界面, 右面的路径就是相对路径 ...

  5. Ubuntu上配置vtk开发环境——基于visual studio code 与 gcc

    环境说明 vtk版本7.1.1 visual studio 1.16.1 Ubuntu 16.04 + 自带的gcc 编译过程与windows下类似还好,运行自己的代码开始面对cmake与make的各 ...

  6. redis简单消息队列

    <?php $redis = new Redis(); $redis->connect('127.0.0.1',6379); $redis->flushall(); $redis-& ...

  7. Ubuntu 14.04 改变文件或者文件夹的拥有者

    只有系统管理者(root)才有这样的权限#将文件 file1.txt 的拥有者设为 runoob,群体的使用者 runoobgroupchown runoob:runoobgroup file1.tx ...

  8. [PKUSC2018]最大前缀和——状压DP

    题目链接: [PKUSC2018]最大前缀和 设$f[S]$表示二进制状态为$S$的序列,任意前缀和都小于等于$0$的方案数. 设$g[S]$表示二进制状态为$S$的序列是整个序列的最大前缀和的方案数 ...

  9. python笔记7 logging模块 hashlib模块 异常处理 datetime模块 shutil模块 xml模块（了解)

    logging模块 日志就是记录一些信息,方便查询或者辅助开发 记录文件,显示屏幕 低配日志, 只能写入文件或者屏幕输出 屏幕输出 import logging logging.debug('调试模式 ...

  10. throws和throw的使用

    throws 用在方法定义上 后面跟一个或者多个异常名称 如果是多个异常名称,之间使用","隔开 , 表达的意思是给该方法添加一个或者多个异常声明; 告诉调用者该方法可能会出现问题 ...