今天遇到一个令人很头疼的问题,vue项目build之后,静态资源和服务器端访问空白,啥效果都没有,最后无奈只好查百度,找方法,正当我放弃的时候,突然找到了救心丸
来,直接上图
好不容易打包好的文件,结果给我报一堆错,难怪页面出不来
当页面出不来时,可能是你的路径不对
查原因是因为绝对路径的原因:你的config文件夹中的index.js文件,里面的build代码块路径是这样的
这里的assetsPublicPath路径是根路径,静态资源当然是访问不到的,修改后是这样的,及那个绝对路径改为相对路径就好了
你以为这样就完了?当然不是,还有src文件夹里面的router文件夹下面的index.js文件。艾玛,绕死我了。里面默认是hash模式,但如果你改成了history模式,这个也会导致页面的加载失败,所以必须改为hash模式,因为这个是默认的,一般删掉mode就好
然后打包的基本页面就可以正常显示了,没错就是可以显示了,但是图时候图片还是出不来
哎,你说气不气,折腾半天图片还出不来,来,继续
进入build文件夹中的utils.js,在里面找到如下代码块,比较难找,仔细点,你就会发现什么
代码留这里了,可以复制,进文件查找
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: ‘vue-style-loader’,
})
} else {
return [‘vue-style-loader’].concat(loaders)
}
}
这次不需要改什么了,只需添加我箭头处的这段代码publicPath: ‘…/…/’,就真的完成了