vue打包后js和css、图片不显示,引用的字体找不到问题;图片一般都是背景图片。

一、vue打包出现js和css不显示问题:

1、不使用mode:‘history’

2、使用mode:‘history’手动添加:

dist包不是服务器跟目录,在index.htm里手动给js和css添加dist目录即可/dist/;

3、或者使用mode:‘history’修改配置:

config里面的index.js找到env: require('./prod.env')模块(新版本build: {),将下面的assetsPublicPath: '/' 改成assetsPublicPath: './' 然后将dist放在服务器上就可以运行了,建议使用这种方法,灵活改动少

二、vue打包出现图片不显示,不能加载字体问题:

不出现的图片一般都是背景图片,打包后会发现图片css样式是 background-image: url(static/img/img@2x.c634efc.png) ,

加载路径是 http://域名/跟目录/static/css/static/img/img@2x.c634efc.png,

或者 http://域名/static/css/static/img/img@2x.c634efc.png

打开跟目录发现图片存放在 static/img下面,根本不在static/css/static/img下面所以加载图片失败。

解决办法:

需要单独为 css 配置 publicPath 。

ExtractTextWebpackPlugin 提供了一个 options.publicPath 的 api,可以为css单独配置 publicPath 。

对于用 vue-cli 生成的项目,dist 目录结构如下:

dist
├── index.html
└── static
├── css
├── img
└── js

用 ExtractTextWebpackPlugin 的 publicPath 配置就可以。更改工程 build/utils.js 文件中 ExtractTextPlugin 插件的options 配置,重新打包:

if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
publicPath: '../../', // 这里是/static/css/static/img/img@2x.c634efc.png 所以跳出两层../../; 注意配置这一部分,根据目录结构自由调整
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
} 加上 publicPath: '../../', 配置后重写打包即可。

vue打包后js和css、图片不显示,引用的字体找不到问题的更多相关文章

  1. 关于vue打包后,访问不到页面和访问不到图片。

    vue项目完成打包上线的时候很多人都会碰到静态资源找不到,常见的有两个第一种:js,css路径不对解决办法:打开config/index.js,将其中的assetsPublicPath值改为’./’ ...

  2. vue打包后空白页问题全记录 (background路径,css js404,jsonp等);

    总结一下vue打包后问题全记录:大部分开发者webpack基本上都是拿来就用的(并没有系统化的研究). 一 >>> 打包之后的静态文件不能直接访问:(例如dist)打包后搭个服务器才 ...

  3. vue打包后显示空白正确处理方法

    vue打包后显示空白正确处理方法是 1.找到配置文件(js与css加载不上) 修改 这样打包处理可以打开但是页面样式会找不到 2.修改(针对css中的图片加载不上) 找到对应的位置加上publicPa ...

  4. vue打包dist文件时,图片找不到

    1.vue打包dist文件时,图片找不到,无法像在本地一样查看 问题描述: 本地代码:<div class="icon"><img :src="'../ ...

  5. Vue打包后出现一些map文件

    Vue打包后出现一些map文件的解决办法: 问题: 可能很多人在做vue项目打包,打包之后js中,会自动生成一些map文件,那我们怎么把它去掉不要呢? 1,运行  cnpm run build  开始 ...

  6. webpack学习(六)打包压缩js和css

    打包压缩js与css 由于webpack本身集成了UglifyJS插件(webpack.optimize.UglifyJsPlugin)来完成对JS与CSS的压缩混淆,无需引用额外的插件, 其命令we ...

  7. VUE 打包后关于 -webkit-box-orient: vertical; 消失,导致多行溢出不管用问题

    VUE 打包后 -webkit-box-orient: vertical; 样式消失,导致页面样式爆炸,看了看解决方案,在这里总结一下: 实际上是 optimize-css-assets-webpac ...

  8. vue打包后运行在本地/非服务器端环境的访问路径

    vue打包前的配置: 项目目录下--> config文件夹---> index.js: build:  { assetsPublickPath:  './',   // 设置成相对路径   ...

  9. vue打包后出现一些map文件的解决方法

    Vue打包后出现一些map文件的解决办法: 问题: 可能很多人在做vue项目打包,打包之后js中,会自动生成一些map文件,那我们怎么把它去掉不要呢? 1.运行  cnpm run build  开始 ...

随机推荐

  1. [jQuery学习系列六]6-jQuery实际操作小案例

    前言最后在这里po上jQuery的几个小案例. Jquery例子1_占位符使用需求: 点击第一个按钮后 自动去check 后面是否有按钮没有选中, 如有则提示错误消息. <html> &l ...

  2. 如何在VS 2010中使用 VS2013的解决方案

    今天要用VS2010打开VS2013,一直觉得VS2010到VS2012只是界面上扁平化的改变,平台工具集有改变但很大程度上可能向上兼容.在网上搜了一些文章,其中有一篇说到一个观点:        从 ...

  3. 第1章 PHP快速入门

    1.最好使用<?php   ?> 即XML风格的PHP标记: 2.echo语句:将传递给其自身的字符串打印到浏览器: 3.注释:①C风格的多行注释/*  */ ②C++风格的单行注释// ...

  4. IT连创业系列:App产品上线后,运营怎么搞?(上)

    又是一阵一阵的时光过去了,今夜,码的不是代码,是文字,继续和大伙分享创业的这一路历程. 话说,在突破技术的领域,IT连和IT恋上线后,慢慢走上运营这条路时,发现自己经常容易迷失. 毕竟,做为一名技术型 ...

  5. Python的字符编码

    Python的字符编码 1. Python字符编码简介 1. 1  ASCII Python解释器在加载.py文件的代码时,会对内容进行编码,一般默认为ASCII码.ASCII(American St ...

  6. socks-proxy---with ssh

    socks-proxy---with sshhttps://blog.csdn.net/scien2011/article/details/54562501

  7. WinForm timer 控件

    timer 控件:按用户定义的时间间隔引发的事件 属性: Enabled 是否启用: Interval 事件发生的事件间隔,单位是毫秒 事件只有一个:Tick 事件经过指定的时间间隔发生 打开一个窗口 ...

  8. LinkedList 底层实现原理

    LinkedList的底层实现原理 LinkedList 底层数据结构为双向链表,链表结构,基于一个个链表节点Node 1,Inner Class 内部类 private static class N ...

  9. flask渲染模板时报错TypeError: &#39;UnboundField&#39; object is not callable

    渲染模板时,访问页面提示TypeError: 'UnboundField' object is not callable 检查代码,发现实例化表单类是,没有加括号:form = NewNoteForm ...

  10. idea 这样 会快点

    最近使用IDEA来开发JAVA应用,对IDEA的界面很有爱,但是缺受不了它的运行速度.每次运行都要编译,所以就有了这边文章   总感觉IDEA的编译速度比eclipse慢,eclipse每次保存都自动 ...