欢迎光临
我们一直在努力

vue打包后js、css、图片、字体404报错问题

一、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放在服务器上就可以运行了,建议使用这种方法,灵活改动少

 

build: {
index:path.resolve(__dirname, ‘../dist/index.html’),
assetsRoot:path.resolve(__dirname, ‘../dist’),
assetsSubDirectory:’./static’,
assetsPublicPath:’./’,
productionSourceMap:true,
devtool:’#source-map’,
bundleAnalyzerReport:process.env.npm_config_report
}

二、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: ‘../../’, 配置后重写打包即可。

赞(0) 打赏
未经允许不得转载:卧龙岗 » vue打包后js、css、图片、字体404报错问题
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏