vue打包后js和css、图片不显示,引用的字体找不到问题

2018年09月20日 | 0 条评论 | 1001

ue打包后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-imageurl(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: '../../', 配置后重写打包即可。


技术咨询
换一个